CODEWITHSUNDEEP
tailwind-css
Mustafa Al Ajmi
Mustafa Al Ajmi

Reputation: 85

How to make after in Tailwindcss?

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

Answers (1)

chojnicki
chojnicki

Reputation: 3623

UPDATE: Since v2.2 Tailwind now supports before/after

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

Related Questions