Tailwind CSS Placeholder Example

In this tutorial we will see tailwind css placeholder forms, tailwind css placeholder style classes, placeholder color example with Tailwind CSS.


Example 1

Tailwind CSS placeholder color.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Placeholder Example </title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <div class="flex items-center justify-center h-screen">
      <div class="flex flex-col space-y-4">
        <input type="email"
          class="w-full px-4 py-2 placeholder-blue-300 border border-gray-300 rounded outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
          placeholder="Email Address" />
        <input type="email"
          class="w-full px-4 py-2 placeholder-green-300 border border-gray-300 rounded outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
          placeholder="Email Address" />
        <input type="email"
          class="w-full px-4 py-2 placeholder-red-300 border border-gray-300 rounded outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
          placeholder="Email Address" />
      </div>
    </div>
  </body>

</html>
tailwind css placeholder colors

tailwind css placeholder colors

Example 2

Tailwind CSS placeholder opacity.

<input type="email"
    class="w-full px-4 py-2 placeholder-blue-300 placeholder-opacity-100 border border-gray-300 rounded outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
    placeholder="Email Address" />
<input type="email"
    class="w-full px-4 py-2 placeholder-blue-300 placeholder-opacity-50 border border-gray-300 rounded outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
    placeholder="Email Address" />
<input type="email"
    class="w-full px-4 py-2 placeholder-blue-300 placeholder-opacity-25 border border-gray-300 rounded outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
    placeholder="Email Address" />
tailwind placeholder opacity

tailwind placeholder opacity

Example 3

Tailwind CSS placeholder text style italic.

<input type="email"
    class="w-full px-4 py-2 placeholder-blue-300 border border-gray-300 rounded outline-none placeholder:italic focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
    placeholder="Email Address" /
tailwind css placeholder text style

tailwind css placeholder text style

Example 4

Tailwind CSS placeholder with font family

<input type="email"
    class="w-full px-4 py-2 placeholder-blue-300 border border-gray-300 rounded outline-none placeholder:font-serif focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
    placeholder="Email Address" />
<input type="email"
    class="w-full px-4 py-2 placeholder-blue-300 border border-gray-300 rounded outline-none placeholder:font-sans focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
    placeholder="Email Address" />
<input type="email"
    class="w-full px-4 py-2 placeholder-blue-300 border border-gray-300 rounded outline-none placeholder:font-mono focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
    placeholder="Email Address" />


Example 5

Tailwind CSS placeholder with font weight.

<input type="email"
    class="w-full px-4 py-2 placeholder-blue-300 border border-gray-300 rounded outline-none placeholder:font-light focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
    placeholder="Email Address" />
<input type="email"
    class="w-full px-4 py-2 placeholder-blue-300 border border-gray-300 rounded outline-none placeholder:font-semibold focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
    placeholder="Email Address" />


Example 6

Tailwind CSS placeholder with Transforming text.

<input type="email"
    class="w-full px-4 py-2 placeholder-blue-300 border border-gray-300 rounded outline-none placeholder:uppercase focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
    placeholder="Email Address" />
<input type="email"
    class="w-full px-4 py-2 placeholder-blue-300 border border-gray-300 rounded outline-none placeholder:lowercase focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
    placeholder="Email Address" />