Tailwind CSS se puede utilizar para crear sitios web de la forma más rápida y sencilla.
Tailwind CSS es básicamente un marco CSS de primera utilidad para construir rápidamente interfaces de usuario personalizadas. Es un marco CSS de bajo nivel altamente personalizable que le brinda todos los componentes básicos que necesita para crear diseños personalizados sin ningún estilo obstinado molesto que tenga que luchar para anular.
La belleza de esta cosa llamada viento de cola es que no impone especificaciones de diseño o cómo debería verse su sitio, simplemente reúne pequeños componentes para construir una interfaz de usuario que es única. Lo que Tailwind simplemente hace es tomar un archivo CSS «en bruto», procesa este archivo CSS sobre un archivo de configuración y produce una salida.
¿Por qué Tailwind CSS?
- Proceso de creación de interfaz de usuario más rápido
- Es un marco CSS de utilidad primero, lo que significa que podemos usar clases de utilidad para crear diseños personalizados sin escribir CSS como en el enfoque tradicional.
Ventajas de Tailwind CSS:
- No más nombres tontos para las clases de CSS y las identificaciones.
- Líneas mínimas de código en el archivo CSS.
- Podemos personalizar los diseños para hacer los componentes.
- Hace que el sitio web sea receptivo.
- Realiza los cambios de la manera deseada.
CSS es de naturaleza global y si realiza cambios en el archivo, la propiedad cambia en todos los archivos HTML vinculados a él. Pero con la ayuda de Tailwind CSS podemos usar clases de utilidad y hacer cambios locales.
Instalación:
Método 1: Instalar Tailwind a través de npm
- Paso 1: npm init -y
- Paso 2: npm instala tailwindcss
- Paso 3: Use la directiva @tailwind para inyectar estilos base, componentes y utilidades de Tailwind en su archivo CSS.
@base de viento de cola;
@componentes de viento de cola;
utilidades @tailwind; - Paso 4: npx tailwindcss init
Esto se usa para crear un archivo de configuración para personalizar los diseños. Es un paso opcional. - Paso 5: npx tailwindcss build styles.css -o output.css
Este comando se usa para compilar style.css es el archivo que debe compilarse y output.css es el archivo en el que debe compilarse. Si la salida del archivo .css no se crea antes, entonces se creará automáticamente.
Método 2: usar Tailwind a través de CDN
html
<!-- add it to the head section of the html file --> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
Pero existen algunas limitaciones cuando se usa CDN. Algunos de ellos son:
- Personalizar el tema predeterminado de Tailwind no se puede usar
- No se pueden usar directivas como @apply, @variants, etc.
- No puedo instalar complementos de terceros
Ejemplo:
html
<!-- Write HTML code here --> <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tailwind CSS</title> <link rel="stylesheet" href="./style.css" /> </head> <body> <!-- font size --> <h1 class="text-lg">Large font size</h1> <!-- font weight --> <h1 class="font-bold">Bold fond weight</h1> <!-- Typography --> <h1 class="tracking-widest">Spacing between words</h1> <!-- Transform --> <h1 class="uppercase">Uppercase word</h1> <!-- line height align color background width padding margin border opacity shadow--> <div class="leading-9 text-right text-red-700 bg-red-500 w-1/2 h-1/3 p-5 my-10 border-t-2 border-solid border-green-500 opacity-40 shadow-2xl"> <p>GeeksforGeeks</p> </div> <!-- focus pseudo class --> <input class="border focus:border-red-500 focus:outline-none p-5 m-5 placeholder-red-500" type="text" name="" value="" placeholder="name" /> <!-- layout --> <div class="md:flex md:flex-wrap m-5"> <div class="bg-blue-500 p-5 md:w-1/3 md:bg-pink-600"> GeeksforGeeks </div> <div class="bg-teal-500 p-5 md:w-1/3"> GeeksforGeeks </div> <div class="bg-yellow-500 p-5 md:w-1/3"> GeeksforGeeks </div> </div> </body> </html>
Producción:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Safari