CODEWITHSUNDEEP
tailwind-csstailwind-in-js
Christian Igay
Christian Igay

Reputation: 35

How to select siblings in tailwind css

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?

Upvotes: 0

Views: 4476

Answers (3)

asad minhas
asad minhas

Reputation: 281

If you want to change the color of label when input is checked, You just needed to add [&:checked+label]:text-red-500 tailwindcss classes and access the siblings.

Yes

More Explain:

<div>
    <input id="choice-yes" type="checkbox" class="opacity-0 w-0 fixed [&:checked+label]:text-red-500"/>
    <label for="choice-yes" class="text-blue-50">Yes</label>
  </div>

Upvotes: 0

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14223

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'),
    ]
}

Upvotes: 1

JsWizard
JsWizard

Reputation: 1749

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;
}

Upvotes: 1

Related Questions