Learn Pseudo Element With TailwindCSS Classes

Currently, there are a lot of utilities ready on the Tailwind CSS. As you know that, this framework will keep growing adding utilities in the future.

In my recent work, I needed a simple CSS background-image with gradient as an overlay. And wanted to utilize pseudo-elements to create this gradient.

Tried to search on official documentation, but apparently, Tailwind CSS currently doesn't have pseudo-element utilities like, ::before/:before or ::after/:after.

Generally, this pseudo-element can be used to create and style like: background image, background gradient, add an icon, custom interaction, etc.

From the v2.2.0, TailwindCSS now supports styling the pseudo-elements like: only (for only-child), first-of-type, last-of-type, only-of-type, target, default, indeterminate, placeholder-shown, autofill, required, valid, invalid, in-range, out-of-range

If you still using the version below v.2.2.0 you should use an additional plugin like this plugin

Create CSS background-image and gradient overlay using Tailwind CSS

TailwindCSS with Just-In-Time enable

For example purpose, I will create a layout like this:

<main class="
  w-full h-full max-w-2xl
  p-6 mx-auto my-8 
  bg-gray-100
  rounded-md
  shadow-md
  grid gap-8
">
  
  <!-- Gradient background and image background example will goes here -->
  
</main>

for the gradient you can try this:

<div class="
  w-full h-full
  rounded-md
  p-20
  relative
  overflow-hidden
  block
  z-10

  before:absolute before:inset-0
  before:z-[-10]
  before:block
  before:w-full before:h-full
  before:bg-gradient-to-r before:from-green-400 before:to-blue-500
">
  <div>
    <p>Pseudo Element With Gradient As A Background</p>
  </div>
</div>

the result will look like this:

The image background using pseudo-element in TailwindCSS will need additional configuration on your tailwind.config.js. Look this:

module.exports = {
  mode: 'jit',
  theme: {
    extend: {
      backgroundImage: {
       'custom-image': "url('https://images.pexels.com/photos/713070/pexels-photo-713070.jpeg')",
      }
    }
  }
};

• We add a new utility called backgroundImage , now we can use bg-custom-image class.

Use these classes like this:

<div class="
  w-full h-full
  rounded-md
  p-20
  relative
  overflow-hidden
  block
  z-10

  before:bg-custom-image before:bg-no-repeat before:bg-cover before:bg-center 
  before:absolute before:inset-0
  before:z-[-10]
  before:block
  before:w-full before:h-full
"
>
  <div>
    <p>Pseudo Element With Image As A Background</p>
  </div>
</div>

the result will look like this:

Using An Additional Pseudo-elements Plugin

On your terminal root project which has Tailwind CSS already installed. Let's add the plugin dependency.  Type this command:

# for NPM
npm install tailwindcss-pseudo-elements --save-dev

# or
# for Yarn
yarn add tailwindcss-pseudo-elements -D

Then type this configuration to your tailwind.config.js file:

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('tailwindcss-pseudo-elements'),
    plugin(({addUtilities}) => {
      const newUtilities = {
        ".empty-content": {
          content: "''",
        },
      }
      addUtilities(newUtilities, {
        variants: ["before", "after"],
      });
    })
  ],
};

• This will add the plugin to the tailwind configuration
• Create new utilities with class .empty-content as the selector and declare content: ' '; as the empty element.
• The last is adding variant before as ::before and after as ::after.

Now inside the HTML  class, try type before:empty-content .

Ex:

<div class="before:empty-content">
	<p>Child of the components</p>
</div>

Check on the browser using inspect tool. You should see the before element created.

Alternatively, here is another TailwindCSS plugin to customize pseudo-element that you can try.‌

Don't miss it: Best Lifetime Deals for Designers and Developers I'll Regret to Missed