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 usebg-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 declarecontent: ' ';
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