CODEWITHSUNDEEP
csstailwind-css
J.Wujeck
J.Wujeck

Reputation: 280

Tailwind :before to all child except first child

I have a breadcrumb. I'm trying to separate each item with a content "/" using Tailwind CSS. I have tried this: last:before:content-['/'] but its not working.

HTML

<nav class="flex" aria-label="Breadcrumb">
  <ul class="flex items-center">
    <li class="flex items-center before:content-['/']">
      <a href="#"> Home </a>
    </li>
    <li class="flex items-center before:content-['/']">
      <a href="#"> Products </a>
    </li>
  </ul>
</nav>

Right now, it look like this:

/Home  /Products

I want to look like this:

Home / Products

Is there any chance to convert this code to Tailwind CSS?

li:not(:first-child):before {
  content: "/";
}

Upvotes: 0

Views: 3777

Answers (1)

Dhaifallah
Dhaifallah

Reputation: 1825

Yes there is by creating your own modifiers using addVariant API, read tailwind CSS docs Creating custom modifiers

The addVariant function allows you to register your own custom modifiers that can be used just like the built-in hover, focus, active, etc. variants.

1- Go to tailwind.config.js and add this line at the top

let plugin = require('tailwindcss/plugin')

2- Then define the modifier inside plugin like this:

plugins: [
    plugin(function ({ addVariant }) {
      addVariant('slash', 'li:not(:first-child):before')
    }),
  ],

3- Use it like this:

<ul class="flex items-center space-x-4 slash:content-['/\00a0']">
    <li class="flex items-center">
      <a href="#"> Home </a>
    </li>
    <li class="flex items-center">
      <a href="#"> Products </a>
    </li>
</ul>

NOTE: the \00a0 is just a Unicode for no-break space, you can delete it.

See it LIVE

Upvotes: 1

Related Questions