Subscribe

Tailwind CSS Pseudo-elements

โœ๏ธ

Using pseudo-elements with Tailwind CSS

20 Jan, 2022 ยท 4 min read

I only learned that Tailwind recently added the option to style pseudo-elements. Since the introduction of Tailwind JIT it turns out we can also leverage pseudo-elements in Tailwind!

Let's look at how it works and what we can do with them.

What are pseudo-elements

If you are not aware of pseudo-elements, they are similar to pseudo-classes like :hover, :first, etc.

The difference is that pseudo-classes are existing elements that get styled differently. As to where pseudo-elements are new elements. They can give us the superpower to add new styled elements to the DOM.

Another way to identify pseudo-elements is to always start with two :: where the classes only use one :.

Let's look at the pseudo-elements and how we can use them in Tailwind CSS.

Tailwind CSS first-line pseudo-element

This pseudo-element can manipulate the first line of a specific sentence.

Let's say we want to make the first line of an article blue, so it pops a bit more. While we are at it, we could also transform the first line to uppercase.

<p
  class="first-line:uppercase first-line:tracking-widest first-line:text-blue-500"
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

This will result in the following:

See the Pen Untitled by Chris Bongers (@rebelchris) on CodePen.

Tailwind CSS first-letter pseudo-element

We can target the first letter like the first-line selector. You often see this in those old-school books giving a nice effect.

I love this effect, which is how you use it in Tailwind CSS.

<p
  class="first-letter:text-7xl first-letter:font-bold first-letter:mr-3 first-letter:float-left first-letter:text-teal-500"
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

The result of the first-letter will look like this:

See the Pen Tailwind CSS Pseudo-element first-line by Chris Bongers (@rebelchris) on CodePen.

Tailwind CSS before pseudo-element

The before pseudo-element is perfect for adding that extra new element to the dom, which you can use to add nice effects to certain elements.

Let's try and create a fun background for an image. We want the image to show, but there should be a different colored div with an angle on the background.

<div
  class="relative before:block before:absolute before:-inset-1 before:-rotate-6 before:bg-teal-500"
>
  <img class="relative border-4 border-white" src="img.jpg" />
</div>

Which will result in the following:

See the Pen Tailwind CSS Pseudo-element first-letter by Chris Bongers (@rebelchris) on CodePen.

Tailwind CSS before pseudo-element

The after element can be used the same way as the before element. Let's try something else for this one.

We often have forms with required fields. Let's add a red * for the required fields.

<label class="block">
  <span
    class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-gray-700"
  >
    Email
  </span>
  <input
    type="email"
    name="email"
    class="block w-full px-3 py-2 mt-1 placeholder-gray-400 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 sm:text-sm focus:ring-1"
    placeholder="[email protected]"
  />
</label>

Resulting in this amazing piece:

See the Pen Tailwind CSS Pseudo-element before by Chris Bongers (@rebelchris) on CodePen.

Tailwind CSS selection pseudo-element

I'm sure you have seen this before, you select a piece of text, and the color is different.

That is done by using the selection pseudo-element.

It looks like this:

<p class="selection:bg-teal-500 selection:text-white">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

Try it out by selecting some text:

See the Pen Tailwind CSS Pseudo-element after by Chris Bongers (@rebelchris) on CodePen.

Conclusion

Now that we can use these selectors in Tailwind, there is almost no need for any custom CSS while using Tailwind.

I'm thrilled these are now so well supported, and I'm sure it will be a game-changer.

If you want to read more, the official docs of Tailwind are always a gem of information.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Creating an animated wave line with Tailwind CSS

10 Mar, 2022 ยท 4 min read

Creating an animated wave line with Tailwind CSS

Tailwind CSS Numeric font variants

9 Mar, 2022 ยท 3 min read

Tailwind CSS Numeric font variants

Join 1828 devs and subscribe to my newsletter