如何在顺风 CSS 中仅制作占位符斜体？

坦率地说，没有内置的方法来制作 Tailwind CSS 中的占位符斜体。所以你必须自定义你的实用程序类，这是 Tailwind CSS 的主要优点，它将它与其他 CSS 框架（如引导程序、基础等）区分开来。

Tailwind 提供了开箱即用的实用程序类集，但很多时候您会遇到需要自己的类的情况，例如创建占位符斜体或将鼠标悬停在按钮上以增加宽度等。

先决条件：按照以下步骤将您自己的实用程序类添加到tailwind。

第 1 步：将以下代码运行到您的文件夹终端。这将创建package.json文件。

npm init 

第 2 步：将以下代码复制并粘贴到文件夹的终端。这将为顺风创建所需的节点模块。

npm install tailwindcss@latest postcss@latest autoprefixer@latest

第三步：创建公用文件夹并添加index.html、 style.css、 和 公用文件夹中的tailwind.css 。

第 4 步：在tailwind.css文件中添加代码。使用此文件，您可以自定义您的顺风 CSS 以及默认样式。 Tailwind 将在构建时将这些指令与它根据您配置的设计系统生成的所有样式交换出来。

@tailwind base;
@tailwind components;
@tailwind utilities;

第 5 步：打开package.json文件并在脚本部分添加以下代码

"scripts": {
    "build:css": "tailwind build public/tailwind.css -o public/style.css"
  },

第 6 步：在终端中运行以下代码。这将使用预定义的 Tailwind CSS 代码填充您的style.css文件。

npm run build:css

第 7 步：最后，运行以下代码。这将使用安装Tailwind CSS npm包时包含的 Tailwind CLI 实用程序为您的项目生成Tailwind 配置文件。

npx tailwindcss init

注意： ::placeholder是一个 CSS 伪元素，它允许您通过更改文本颜色来设置表单元素的占位符文本的样式，并且它允许修改文本的样式。

将以下代码添加到您的tailwind.css文件中，这将有助于设置占位符斜体的样式。

顺风.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .placeholder-italic::placeholder{
     font-style: italic;
  }
}

通过使用@layer 指令，Tailwind 会自动将这些样式移动到与@tailwind 实用程序相同的位置，以避免意外的特异性问题。现在，您可以添加上面的 placeholder-italic 类以将字体样式斜体应用于占位符，如下例所示。

句法：

示例 1：

HTML

    
  Email of Candidate
  
  

  

输出：

示例 2：在下面的示例中，第一个输入的占位符是斜体，第二个输入是非斜体（默认）。

HTML

        

          

             WelCome To GEEKSFORGEEKS
          
  
          

            
            
            
              
            
              Login
            
          
        

  

输出：