En este artículo, cambiaremos el ancho al pasar el mouse usando Tailwind. Tailwind no tiene un método incorporado, por lo que debe personalizar el archivo tailwind.config.js . Analicemos todo el proceso más adelante en este artículo.
De forma predeterminada, Tailwind CSS solo genera variantes de respuesta para las utilidades de ancho. Para modificar el ancho al pasar el mouse, debe modificar el archivo tailwind.config.js . El siguiente paso es agregar el archivo tailwind.config.js en la carpeta de su proyecto para trabajar al pasar el mouse para cambiar el ancho.
Primero, tienes que instalar Tailwind CSS . A continuación se detallan los pasos para instalar Tailwind CSS.
Requisito previo: siga el paso a continuación para agregar su propia clase de utilidad al viento de cola.
Paso 1: Ejecute el siguiente código en el terminal de su carpeta. Esto creará el archivo package.json.
npm init
Paso 2: Copie y pegue el siguiente código en el terminal de su carpeta. Esto creará el módulo de Node necesario para el viento de cola.
npm install tailwindcss@latest postcss@latest autoprefixer@latest
Paso 3: cree una carpeta pública y agregue index.html, style.css y tailwind.css dentro de la carpeta pública.
Paso 4: agregue el siguiente código en el archivo tailwind.css . Con este archivo, puede personalizar su CSS de viento de cola junto con el estilo predeterminado. Tailwind intercambiará estas directivas en tiempo de compilación con todos los estilos. Genera basado en su sistema de diseño configurado.
@tailwind base; @tailwind components; @tailwind utilities;
Paso 5: abra el archivo package.json y, debajo de la etiqueta del script, agregue el código siguiente
"scripts": {
"build:css": "tailwind build public/tailwind.css -o public/style.css"
},
Paso 6: Ejecute el siguiente código en la terminal. Esto llenará su archivo style.css con el código CSS de Tailwind predefinido.
npm run build:css
Paso 7: Finalmente, ejecute el siguiente código. Esto generará un archivo de configuración de Tailwind para su proyecto utilizando la utilidad Tailwind CLI incluida cuando instala el paquete tailwindcss npm:
npx tailwindcss init
Sintaxis:
variants: {
width: ["responsive", "hover", "focus"]
}
tailwind.config.js: el siguiente código es el contenido del archivo de configuración de tailwind. Simplemente queremos extender la configuración para agregar nuevos valores.
Javascript
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
width: ["responsive", "hover", "focus"]
},
plugins: [],
}
Ejemplo 1:
HTML
<!DOCTYPE html> <html class="dark"> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class=" w-1/3 hover:w-4/5 bg-green-200 "> <div>HOVER HERE</div> </div> </body> </html>
Producción:
Ejemplo 2: nuevamente al pasar el mouse, para cambiar tanto la altura como el ancho, debe agregar o modificar el código a continuación en tailwind.config.js
variants: {
width: ["responsive", "hover", "focus"],
height: ["responsive", "hover", "focus"]
},
HTML
<!DOCTYPE html> <html class="dark"> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class=" w-1/3 hover:w-4/5 hover:h-20 bg-green-200 text-center"> <div>HOVER HERE</div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA