點燈坊

失くすものさえない今が強くなるチャンスよ

Using first-letter to Style the First Letter of the Paragraph

Sam Xiao's Avatar 2022-01-25

We can use first-letter modifier to style the first letter of the paragraph.

Version

TailwindCSS 3.0

first-letter

first-letter000

Only the first letter of the paragraph is styled.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <p class="first-letter:text-7xl first-letter:font-bold first-letter:float-left first-letter:mr-3 ml-3">
    Xorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate ea facere hic laborum libero, mollitia porro. Animi architecto aspernatur, est iste itaque non optio possimus quaerat quas repellendus, sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, dicta, suscipit. Adipisci alias aliquam animi beatae consectetur, culpa distinctio id iste neque nesciunt nihil, officia quos repellat repudiandae vero voluptatum.
  </p>
</body>

Line 10

<p class="first-letter:text-7xl first-letter:font-bold first-letter:float-left first-letter:mr-3 ml-3">
  Xorem 
</p>
  • first-letter:text-7xl : apply text-7xl utility on first-letter modifier, which sets the font size of the first letter
  • first-letter:font-bold : apply font-bold utility on first-letter modifier, which sets the font weight of the first letter
  • first-letter:float-left : apply float-left utility on first-letter modifier, which makes the first letter floats to the left of the paragraph
  • first-letter:mr-3 : apply mr-3 utility on first-letter modifier, which sets the right margin of the first letter
  • ml-3 : set left margin of the paragraph

Conclusion

  • We can apply other typography utilities on first-line modifier

Reference

TailwindCSS, First-line and first-letter

# TailwindCSS