Este artículo explicará el método para usar las utilidades estáticas en Tailwind CSS.
¿Cómo usar las utilidades estáticas en Tailwind?
Para usar las utilidades estáticas en Tailwind, agregue el ' agregarUtilidades() ” en el archivo “tailwind.config.js” y configure las utilidades estáticas deseadas. Luego, use las utilidades estáticas en el programa HTML y asegúrese de que las utilidades estáticas funcionen correctamente al visualizar la página web HTML.
Exploremos los siguientes pasos:
Paso 1: configure las utilidades estáticas en el archivo 'tailwind.config.js'
Abre el ' tailwind.config.js ” archivo y agregue el “ complementos ' sección. Luego, use el “ agregarUtilidades() ” para configurar las utilidades estáticas deseadas. Por ejemplo, hemos configurado las siguientes utilidades estáticas:
const plugin = require('tailwindcss/plugin')
módulo.exportaciones = {
contenido: ['./index.html'],
complementos: [
plugin(función({ añadirUtilidades }) {
agregarUtilidades({
'.contenido-automático': {
'contenido-visibilidad': 'automático',
},
'.contenido-oculto': {
'contenido-visibilidad': 'oculto',
},
'.bg-coral': {
fondo: 'coral'
},
'.sesgo-5grados': {
transformar: 'sesgo Y (-5 grados)',
},
})
})
]
};
Aquí:
- El ' agregarUtilidades() La función registra las utilidades estáticas personalizadas proporcionando un objeto que contiene clases de utilidad y sus estilos correspondientes.
- El ' .content-auto La clase de utilidad establece la propiedad de visibilidad del contenido en automático.
- El ' .content-hidden La clase de utilidad establece la propiedad de visibilidad del contenido como oculta.
- El ' .bg-coral La clase de utilidad establece el color coral en el fondo.
- El ' .sesgo-5deg La clase de utilidad establece la propiedad de transformación en skewY (-5deg).
Paso 2: use las utilidades estáticas en el programa HTML
Ahora, use las utilidades estáticas deseadas en el programa HTML:
< división clase = 'h-pantalla bg-coral' >
< pag clase = 'contenido-auto' >Hola< / pag >
< pag clase = 'contenido oculto' >Bienvenido aqui< / pag >
< pag clase = 'sesgo-5 grados' >Transformar texto< / pag >
< / división >
< / cuerpo >
Paso 3: Verificar salida
Finalmente, ejecute el programa HTML para asegurarse de que las utilidades estáticas funcionen correctamente:
El resultado anterior indica que las utilidades estáticas funcionan correctamente de acuerdo con lo que se definieron.
Conclusión
Para usar las utilidades estáticas en Tailwind, se requiere usar el “ agregarUtilidades() ” en el archivo “tailwind.config.js” y configure las utilidades estáticas deseadas. La función “addUtilities()” y agrega clases de utilidad que se pueden aplicar directamente en el programa HTML. Este artículo ha explicado el método para usar utilidades estáticas en Tailwind CSS.