Convey complex css in tailwindcss - tailwind-css

Question

Functional css make DX a pleasant, but I always wonder how do we convey some thing like
.item + item {
margin-top: 20px;
}
into our template using tailwindcss ?

Answer 1

You may write your own plugin for this
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin( ({ addVariant, e }) => {
addVariant('item', ({ modifySelectors, separator }) => {
modifySelectors(
({ className }) => {
const eClassName = e(`item${separator}${className}`); // escaped class. This is like `item:bg-red-500` basically
return `[class^="item"] + .${eClassName}`; // this is your CSS selector
}
)
})
})
],
}
I chose this [class^="item"] selector (class starts with item) as it is allows not to have extra classes in HTML layout but it is up to you which you want to have
Use it as custom Tailwind variant like item:any-tailwind-class
<div class="item:mt-5 item:bg-red-500">1 - No `item` above - no CSS applied</div>
<div class="item:mt-5 item:text-yellow-500">2 - There is `item` above - CSS applied</div>
<div class="item:mt-5 item:bg-red-500 item:text-yellow-500">3</div>
<div class="item:mt-5 item:bg-red-500">4</div>
<div class="item:mt-5">5 - Has margin-top</div>
<div class="">6 - Nothing here</div>
<div class="item:bg-red-500">7- No `item` above - no color applied</div>
<div class="item">8 - This class starts with `item` so the next div should have styles</div>
<div class="item:mt-5 item:bg-red-500">9 - There is `item` above - CSS applied</div>
DEMO