Conceptos Principales, Custom Modifiers (Modificadores Personalizados)

Uso de arbitrary variants (variantes arbitrarias)

Así como los valores arbitrarios permiten utilizar valores personalizados con clases personalizadas, las variantes arbitrarias permiten modificadores de selección personalizados directamente en el HTML.

Las variantes arbitrarias son solo strings de formateo que representan al selector, envuelto en llaves.

Por ejemplo, este modificador arbitrario selecciona un elemento solamente cuando es el tercer nodo hijo.

<div class="bg-white p-5">
    <ul>
        <li class="[&:nth-child(3)]:underline">Item</li>
        <li class="[&:nth-child(3)]:underline">Item</li>
        <li class="[&:nth-child(3)]:underline">Item</li>
    </ul>
</div>

Ejemplo

Las variantes arbitrarias pueden apilarse con los modificadores de la misma forma que el resto de los modificadores en Tailwind.

<div class="bg-white p-5">
    <ul>
        <li class="md:[&:nth-child(3)]:hover:underline">Item</li>
        <li class="md:[&:nth-child(3)]:hover:underline">Item</li>
        <li class="md:[&:nth-child(3)]:hover:underline">Item</li>
    </ul>
</div>

Creación de un plugin en Tailwind CSS

Si tienes que crear un modificador arbitrario en multiples ocasiones en el mismo proyecto, vale la pena extraer este modificador dentro de un plugin utilizando el API addVariant.

<div class="bg-white p-5">
    <ul>
        <li class="third:underline">Item</li>
        <li class="third:underline">Item</li>
        <li class="third:underline">Item</li>
    </ul>
</div>

let plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
export default {
    theme: {
        extend: {
            // ...
        },
    },
    plugins: [
        plugin(function ({ addVariant }) {
            // Add a `third` variant, ie. `third:pb-0`
            addVariant('third', '&:nth-child(3)')
        }),
    ],
}

Ejemplo