Estoy tratando de crear un solo archivo js para un componente que se usa con varios estilos en mi proyecto. En una página tengo varios botones para algunas funciones, con un color de fondo predeterminado establecido en el archivo html (por ejemplo bg-gray-500 ). Para los botones donde la función está activada, cambio el color de fondo, actualmente con js, pero por lo tanto, el color bg para la "función activada" (por ejemplo, bg-blue-500) está definido en js y esto es lo que me gustaría pasar al archivo html. Entonces, en lugar de tener <button type="button" class="bg-gray-500"></button> y hacer que js elimine la clase bg-gray-500 y agregue la clase bg-blue-500 , me pregunto si esto es posible tener algo como <button type="button" class="bg-gray-500 selected:bg-blue-500"></button> donde el js solo tendría que agregar o eliminar la clase selected para cambiar entre uno y otro color, en lugar de especificar el color en sí. Gracias
Puede escribir un complemento simple para variantes personalizadas
// tailwing.config.js const plugin = require('tailwindcss/plugin') module.exports = { theme: { extend: {}, }, plugins: [ plugin(function({ addVariant }) { addVariant('selected', '&.selected'); addVariant('parent-selected', '.selected &'); }) ], }HTML
<div> <button class="bg-blue-500 selected:bg-red-500 selected"> Button </button> </div> <div class="selected"> <button class="bg-blue-500 parent-selected:bg-yellow-500"> Button </button> </div> La magia aquí es la función addVariant() donde el primer parámetro es el nombre de la variante (puede ser cualquiera, pero debe ser único entre todas las variantes; en HTML, utilícelo como selected: ), segundo - selector CSS (entonces &.selected significa elemento con clase .selected ) o función de devolución de llamada que debería devolver una cadena como selector CSS
En una demostración, creé dos casos solo por ejemplo: alternar la clase en el elemento en sí o en el elemento principal
DEMO : cambia la clase selected para ver el efecto