How to make only placeholder italics in tailwind CSS ?

Last Updated : 18 Jun, 2021

Frankly speaking, there is no build-in method to make placeholder italic in Tailwind CSS. So you have to customize your utilities class and that is the main perks of Tailwind CSS that separates it from other CSS Framework like bootstrap, foundation etc.

Tailwind provides sets of utility classes out of the box, but many times you run into a situation where you need your own class like creating placeholder italic or hovering over a button to increase width etc.

Prerequisite: Follow the below step to add your own utilities class to tailwind.

Step 1: Run the below code to your folders terminal. This will create package.json file.

npm init

Step 2: Copy and paste the below code to your folder’s terminal. This will create required node module for tailwind.

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Step 3: Create a public folder and add index.html, style.css, and tailwind.css inside public folder.

Step 4: Add the code in tailwind.css file. Using this file you can customize your tailwind CSS along with default style. Tailwind will swap these directives out at build-time with all the styles it generates based on your configured design system.

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

Step 5: open package.json file and under script section add below code

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

Step 6: Run the below code in terminal. This will populate your style.css file with predefined Tailwind CSS code.

npm run build:css

Step 7: Finally, run the below code. This will generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the Tailwind CSS npm package.

npx tailwindcss init

Note: The ::placeholder is a CSS pseudo-element that allows you to style the placeholder text of a form element, by changing the text color, and it allows to modify the style of the text.

Add the below code to your tailwind.css file which will help to style the placeholder italic.

tailwind.css

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

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

By using @layer directive, Tailwind will automatically move those styles to the same place as @tailwind utilities to avoid unintended specificity issues. Now you can add the above placeholder-italic class to apply font-style italic to a placeholder as given in the below examples.

Syntax:

<input class="placeholder-italic" />

Example 1:

HTML

<!DOCTYPE html> 
<body class="flex h-screen justify-center items-center"> 
    
  <label>Email of Candidate</label> 
  <!-- using placeholder-italic in a class to make 
       font-style italic of a placeholder-->
  <input class="placeholder-gray-600  w-1/3 
                 border text-center border-green-500  
                 placeholder-italic"  
         placeholder="Aman@gfg.com"> 
</body> 
  
</html> 

Output:

Example 2: In the below example, the first input’s placeholder is italic and the second input is non-italic ( default ).

HTML

<!DOCTYPE html> 
<body > 
        <div class="h-screen flex flex-col  
                    items-center justify-center"> 
          <p class="text-green-700 text-xl mb-3 "> 
             WelCome To GEEKSFORGEEKS 
          </p> 
  
          <form > 
            <!-- using placeholder-italic class  
                 to create italic input-->
            <input
              aria-label="Enter your email address"
              type="text"
              placeholder="Email address"            
              class="placeholder-italic text-sm text-gray-base 
                     w-full mr-3 py-5 px-4 h-2 border  
                     border-gray-200 rounded mb-2"/> 
            <input
              aria-label="Enter your password"
              type="password"
              placeholder="Password"
              class="text-sm text-gray-base 
                     w-full mr-3 py-5 px-4 h-2 
                     border border-gray-200 rounded mb-2"/> 
              
            <button type="submit"
                    class="bg-green-400 w-full mt-4"> 
              Login 
            </button> 
          </form> 
        </div> 
</body> 
  
</html> 