tailwind-css - 如何在顺风 css 中选择兄弟姐妹

Question

我想创建一个输出

主页 / 图书馆 / 数据

这是我的 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>

这是我在顺风 css 中的 css。

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

我错过了什么还是我需要在配置中的某个地方进行设置？

Answer 1

尝试这个，

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+内置了对调用的兄弟姐妹peer的支持，但它适用于伪类而不是伪元素。最简单的解决方案将是 Tailwind v2.2 的这种结构（因为它支持after）并mode: 'jit'在您的配置中启用。

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

演示：https ://play.tai​​lwindcss.com/bXQTNZtkMI

对于旧版本，您可以使用tailwindcss-pseudo-elements 之类的插件，这将添加对before和的支持after。使用此插件，您需要在配置中扩展变体并将内容定义为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'),
    ]
}