Tailwind CSS First Letter Drop Cap Example

In this tutorial we will see tailwind css first letter class, tailwind css drop cap, first letter with font-size, first letter with font weight, first letter with first word color, first letter with font family, first letter with text transform (uppercase, lowercase, capitalize, normal-case), examples with Tailwind CSS.

Requirement

Tailwind CSS 2.2 or above

Example 1

First letter with Font Size (sm, lg, xl,4xl).

<p class="first-letter:text-4xl">
  The only way to learn a new programming language is by writing programs in it.
</p>

Example 2

First letter with Font Weight like font-thin,font-light,font-semibold,font-bold etc...

<p class="first-letter:text-4xl first-letter:font-bold">
  The only way to learn a new programming language is by writing programs in it.
</p>

Example 3

First letter with color

<p class="first-letter:text-4xl first-letter:font-bold first-letter:text-blue-700">
  The only way to learn a new programming language is by writing programs in it.
</p>

Example 4

First letter with with Font Family (font-sans, font-serif,font-mono)

<p
  class="
    first-letter:text-4xl
    first-letter:font-bold
    first-letter:text-blue-700
    first-letter:font-serif
  "
>
  The only way to learn a new programming language is by writing programs in it.
</p>

Example 5

First letter with opacity 5,10,20,30.....,100

<p
  class="
    first-letter:text-4xl
    first-letter:font-bold
    first-letter:text-blue-700
    first-letter:font-serif
    first-letter:text-opacity-50
  "
>
  The only way to learn a new programming language is by writing programs in it.
</p>

Example 6

First letter with Text Transform (uppercase, lowercase, capitalize, normal-case)

<p
  class="
    first-letter:uppercase
    first-letter:text-4xl
    first-letter:font-bold
    first-letter:text-blue-700
    first-letter:font-serif
  "
>
  the only way to learn a new programming language is by writing programs in it.
</p>