點燈坊

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

You might not need before in TailwindCSS

Sam Xiao's Avatar 2022-01-26

It’s worth noting that you don’t really need ::before and ::after pseudo-elements for most things in TailwindCSS projects — it’s usually simpler to just use a real HTML element.

Version

TailwindCSS 3.0

before

before000

annoyed is decorated using the pseudo element with before mofifier.

<!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>
  <blockquote class="text-2xl font-semibold italic text-center text-slate-900">
    When you look
    <span class="before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block">
      <span class="relative text-white">annoyed</span>
    </span>
    all the time, people think that you're busy.
  </blockquote>
</body>

Line 10

<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
  When you look
</blockquote>
  • text-2xl : set the font size
  • font-semibold : set the font weight
  • italic : set the font style
  • text-center : set text alignment to horizontal center
  • text-slate-900 : set the font color

Line 12

<span class="before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block">
  • before:absolute : create a pseudo element with absolute position
  • before:-inset-1 : create a pseudo element with top/right/bottom/left position
  • before:-skew-y-3 : create a pseudo element with skewing
  • before:bg-pink-500 : create a pseudo element with background
  • relative : set the element as relative position for absolute
  • inline-block : shrink to fit the content width

Line 13

<span class="relative text-white">annoyed</span>
  • relative : prevent the element from overlaping by the pseudo element
  • text-white : set the text color

span

before000

annoyed is decorated using the real element without before modifier.

<!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>
  <blockquote class="text-2xl font-semibold italic text-center text-slate-900">
    When you look
    <span class="relative">
      <span class="absolute -inset-1 -skew-y-3 bg-pink-500" aria-hidden="true"></span>
      <span class="relative text-white">annoyed</span>
    </span>
    all the time, people think that you're busy.
  </blockquote>
</body>

Line 12

<span class="relative">
  • relative : set the element as relative position for absolute

Line 13

<span class="absolute -inset-1 -skew-y-3 bg-pink-500" aria-hidden="true"></span>

The real element for decorating.

  • absolute : create a real element with absolute position
  • -inset-1 : create a real element with top/right/bottom/left position
  • skew-y-3 : create a real element with skewing
  • bg-pink-500 : create a real element with background

Line 14

<span class="relative text-white">annoyed</span>
  • relative : prevent the element from overlaping by the pseudo element
  • text-white : set the text color

Conclusion

  • before and after are new modifiers in TailwindCSS 3 for creating pseudo elements. Here’s the same design from above but using a <span> instead of the ::beforepseudo-element, which is a little easier to read and is actually less code

  • Save before and after modifiers for situations where it’s important that the content of the pseudo element is not actually in the DOM and can’t be selected by the user

Reference

TailwindCSS, Before and after

# TailwindCSS