@wdsrocha
Blog

Published on

Inserting visual separators with Tailwind

Tailwind allows to use arbitrary values to write selectors. Here is an example of a breadcrumb separated by the > character:

<div class="[&>:not(:first-child):before]:content-['>_']">
  <span>Clothes</span>
  <span>Men's Clothes</span>
  <span>Shoes</span>
  <span>Current Page</span>
</div>

A string equal to "Clothes > Men's > Clothes > Shoes > Current Page" rendered inside an HTML page.

To reduce verbosity, you can add the variant to you tailwind config file.

// tailwind.config.js
const plugin = require("tailwindcss/plugin");

module.exports = {
  plugins: [
    plugin(({ addVariant }) =>
      addVariant("between", "&>:not(:first-child):before")
    ),
  ],
};

And you will be able to use it like any other existing variant.

<div class="between:content-['>_']">
  <span>Clothes</span>
  <span>Men's Clothes</span>
  <span>Shoes</span>
  <span>Current Page</span>
</div>

Sandbox.

Accessibility concern

Keep in mind that the :before pseudo element is only used for decorative purposes so screen readers ignore them. If the content you want to display is actually meaningful, consider using JavaScript. See the WAI-ARIA explanation.