A Tailwind CSS plugin to add ::before
and ::after
pseudo-element variants.
yarn add tailwind-pseudo-elements
# or
npm install tailwind-pseudo-elements
Add the plugin to the plugins
section of your tailwind.config.js
file.
// tailwind.config.js
module.exports = {
plugins: [require('tailwind-pseudo-elements')],
}
Tailwind has a couple of different ways to configure your variants, but I would recommend appending the before and after variants to the defaults like so:
// tailwind.config.js
module.exports = {
variants: {
// Defaults are ['responsive', 'hover', 'focus']
backgroundColor: ({ after }) => after(['before', 'after']),
// Output: ['responsive', 'hover', 'focus', 'before', 'after']
},
}
<p
class="before-inset-0 before:bg-green-500 before:rounded-sm before:opacity-80"
data-content-before="Check it out: "
>
Check out this sumptuous green rectangle
</p>
When you add the before
or after
variants to a plugin, additional classes with a before:
or after:
prefix are generated which look like this:
.before\:h-3::before {
height: 0.75rem;
}
To reduce the boilerplate of creating a pseudo-element there are .before-content
and .before-inset-0
helper classes (plus .after-content
& .after-inset-0
) which look like this:
.before-content::before {
content: attr(data-content-before);
}
.before-inset-0 {
position: relative;
}
.before-inset-0::before {
content: attr(data-content-before);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
There’s also .before-inset-x-0
and .before-inset-y-0
which only set left
/right
and top
/bottom
.
You can then modify or override those base styles as needed using before:
or after:
prefixed classes.
<p class="before-inset-0 before:top-auto before:h-2 before:bg-green-500">
Wow, how convenient is that?
</p>
The above example creates
The .before-content
and .after-content
classes both set the pseudo-element’s content to the value of the element’s data-content-before
and data-content-after
attributes.
This lets you control the content of the pseudo-elements using either HTML or Javascript:
<p class="before-content" data-content-before="You have to check this out: ">
Amazing deals like you’ve never seen before! At these prices I'm practically
giving them away! When you see how low our prices are you’ll think I’ve gone
insane!
</p>