How to select siblings in tailwind css

Question

I want to create an output like

Home / Library / Data

Here is my HTML

<div class="st-breadcrumb">
    <div class="st-breadcrumb-default"></div>
    <div class="st-breadcrumb-item">Home</div>
    <div class="st-breadcrumb-item active">Library</div>
    <div class="st-breadcrumb-item">Data</div>
</div>

Here is my css in tailwind css .

st-breadcrumb-item ~ .st-breadcrumb-item:before {
  content: '/';
  margin: '10px';
}

Did I miss something or I need to have settings somewhere in config?

Answer 1

Try this,

HTML

<div>
  <div className={"st-breadcrumb"}>
    // "your default div deleted"
    <div className={"st-breadcrumb-item"}>Home</div>
    <div className={"st-breadcrumb-item active"}>Library</div>
    <div className={"st-breadcrumb-item"}>Data</div>
  </div>
</div>

CSS

.st-breadcrumb {
  display: flex;
  flex-direction: row;
}

.st-breadcrumb-item ~ .st-breadcrumb-item::before {
  content: "/";
  margin: 10px;
}

Answer 2

Tailwind v2.2+ has built-in support for siblings called peer but it works with pseudo-classes not pseudo-elements. Simplest solution will be this structure for Tailwind v2.2 (as it is has support for after) with mode: 'jit' enabled in your config.

<div class="flex">
    <div class="after:content-['/'] after:mx-2.5">Home</div>
    <div data-separator='/' class="after:content-[attr(data-separator)] after:mx-2.5">Library</div>
    <div class="">Data</div>
</div>

// tailwind.config.js

module.export = {
    mode: 'jit',
    purge: {
        content: [
            // files to watch
        ],
    },
}

DEMO: https://play.tailwindcss.com/bXQTNZtkMI

For older versions you can use plugins like tailwindcss-pseudo-elements which will add support for before and after. With this plugin you need to extend variants in your config and define content as tw-content-after="/"

<div class="flex">
    <div tw-content-after="/" class="after:mx-2.5">Home</div>
    <div tw-content-after="/" class="after:mx-2.5">Library</div>
    <div class="">Data</div>
</div>

// tailwind.config.js

module.export = {
    variants: {
        extend: {
            margin: ['after'],
        },
    },
    plugins: [
         require('tailwindcss-pseudo-elements'),
    ]
}