Entendiendo las variantes y las pseudo-clases

Aquí esta el código que agrega de la documentación

<button class="disabled:opacity-75 bg-blue-500">
  Submit
</button>

El segundo código que agrega

variants: {
    opacity: ['responsive', 'hover', 'focus', 'disabled'],
  },

link de la documentación:
https://tailwindcss.com/docs/pseudo-class-variants/#app

Es importante tomar en cuenta que al colocar las variantes extras, se deben colocar también las que trae por defecto debido a que el arreglo de variantes no se combina con el arreglo de las variantes por defecto.

Si están utilizando el fichero de configuración tailwind.config.full.js ya está agregada la variante de opacity.

Buscar la línea y agregar ‘disabled’.

Variantes: Instrucciones para que el diseño cambie dependiendo del evento (html)

• Responsive: se ejecuta al cambio de resolución u orientación
• Hover: se ejecuta cuando colocamos el cursor encima o fuera de un elemento
• Focus: se ejecuta cuando el elemento tiene el foco
• Disabled: se ejecuta cuando el elemento es deshabilitado

Pseudo-Class: Palabra clave que se añade a la clase para lograr un diseño deseado

• Responsive: sm, md, lg, xl
• Hover: hover
• Focus: focus
• Disabled: disabled

https://tailwindcss.com/docs/hover-focus-and-other-states#disabled

f

¿Alguien sabe por qué a mi no me refleja los cambios? no se aplica el disabled

si que va a estar bueno diferenciar las variantes con las pseudoclases.

Si no les funciona el disabled, no se olviden de hacer:

npm run build

en su carpeta del proyecto.

Buena explicación!