Tailwind CSS es un framework CSS repleto de clases que se pueden componer para crear cualquier diseño.

Tailwind tiene como objetivo producir el archivo CSS más pequeño posible generando solo el CSS que realmente está utilizando en su proyecto.

Netflix usa Tailwind

Tailwind es un complemento de PostCSS y no hay nada que le impida usarlo con Sass, Less, Stylus u otros preprocesadores. Pero se recomienda usar solo PostCSS.

Con Tailwind:

1. No se desperdicia energía inventando nombres de clase, 1, Rara vez se necesita escribir CSS nuevo,
2. Hacer cambios se siente más seguro,

1. Instalación

Instale Tailwind a través de npm

npm install -D tailwindcss

2. Configuración

De forma predeterminada, Tailwind buscará en la raíz de su proyecto, un archivo llamado tailwind.config.js donde puede configurar y personalizar Tailwind.

npx tailwindcss init

Esto creará un archivo tailwind.config.js

La sección content es donde configura las rutas a otros archivos de origen (HTML, JS, u otras plantillas) que contienen nombres de clases de Tailwind, para asegurarnos de que Tailwind genere todo el CSS que necesita el proyecto.

Para obtener el mejor rendimiento y evitar falsos positivos, sea lo más específico posible con la configuración de su contenido.

1. Cada sección del archivo es opcional
2. Es importante que no escanee ningún archivo CSS,
3. Utilice siempre nombres de clase completos. Si utiliza interpolación de cadenas o concatena nombres, Tailwind no los encontrará,

3. Directivas

Agregue las directivas @tailwind a su archivo CSS principal.

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Compilación

npx tailwindcss -i ./src/input.scss -o ./dist/output.css --watch

1. Si está utilizando Tailwind CLI, puede minimizar su CSS agregando la bandera --minify