Reputation: 85
I'm trying to turn my website to full Tailwindcss as i'm just learning it
how can i turn AFTER value in Tailwindcss ?
spanthis::before {
content: "OMANI";
animation: animate infinite 3s;
padding-left: 10px;
}
@keyframes animate {
0% {
content: "OMANI";
}
5% {
content: "COOL";
}
15% {
content: "PROFESSIONAL";
} }
Upvotes: 2
Views: 15521
Reputation: 3623
Tailwind does not support before/after pseudo-classes.
There is opened feature request about it: https://github.com/tailwindlabs/tailwindcss/discussions/2119
"Full tailwind" does not have to mean dropping CSS completely and having everything inline. You can as well combine @apply
with pseudo classes.
But there is unofficial plugin for that if you really need this inline https://github.com/shimyshack/tailwindcss-pseudo-element-plugin
<ul class="inline-block">
<li class="inline-block after:inline-block after:pseudo-content-comma after:mr-1">Item 1</li>
<li class="inline-block after:inline-block after:pseudo-content-comma after:mr-1">Item 2</li>
<li class="inline-block after:inline-block after:pseudo-content-oxford-ampersand after:mr-1">Item 3</li>
<li class="inline-block">Item 4</li>
</ul>
Upvotes: 4