Sling Academy
Home/Tailwind CSS/How to Style Placeholder Text with Tailwind CSS

How to Style Placeholder Text with Tailwind CSS

Last updated: December 15, 2023

In Tailwind CSS, you can style the placeholder text of an input field (or textarea) by using the placeholder modifier (a modifier is a prefix word that can be added to the beginning of a utility class) in combination with text utility classes, such as placeholder:text-2xl, placeholder:text-red-500, placeholder:semibold, etc.

Example:

The code:

<body>
    <div class="w-screen h-screen p-20 bg-blue-600">
        <input
            class="placeholder:text-blue-300 placeholder:italic placeholder:uppercase w-96 px-5 py-2 rounded-full outline-none"
            placeholder="Welcome to SlingAcademy.com" />
    </div>
</body>

That’s it. Happy coding & have a nice day!

Next Article: Tailwind CSS: How to style the Select element

Series: Styling Form Elements with Tailwind CSS

Tailwind CSS

Related Articles

You May Also Like

  • How to Create Striped Tables with Tailwind CSS
  • Tailwind CSS: Creating Shimmer Loading Placeholder (Skeleton)
  • Tailwind CSS: How to Create Parallax Scrolling Effect
  • How to Style Lists in Tailwind CSS
  • Text Underline in Tailwind CSS
  • How to Change Mouse Cursor in Tailwind CSS
  • Form Validation with Tailwind CSS (without Javascript)
  • first-of-type and last-of-type in Tailwind CSS
  • Tailwind CSS: Create a User Card with Circle Avatar
  • Tailwind CSS: How to Create Columns with the Same Height
  • Tailwind CSS: Make a Div 100% Height & Width of the Viewport
  • Using :not() selector in Tailwind CSS
  • Tailwind CSS: How to Create a Stepper
  • Using ::before and ::after in Tailwind CSS
  • Tailwind CSS: How to Create a Vertical Divider Line
  • How to Create Pill Buttons with Tailwind CSS
  • Tailwind CSS: How to Disable Text Selection
  • Tailwind CSS: How to Disable Resizing of Textarea
  • Tailwind CSS: Expand a Text Input on Focus (without Javascript)