✨ Tailwind CSS

👉 Ver todas las notas

Tailwind es un framework (open-source) no opinionado de CSS, que nos provee de clases utilitarias para componer y usar a modo de bloques en nuestros maquetados, aplicando la filosofía de CSS Funcional o Atomic CSS.

Funciona como un plugin de PostCSS, por lo que podemos integrarlo fácilmente con otras herramientas muy útiles, como autoprefixer ó PurgeCSS.

A diferencia de otros frameworks como Bootstrap ó Bulma CSS, Tailwind no posee componentes con estilos predefinidos (como hero, button, card, navbar, etc), por lo cual no nos veremos en el problema de estar sobre-escribiendo estilos luego si buscamos realizar diseños más customizados. Lo que nos provee en cambio, son clases utilitarias que podemos utilizar y componer para crear nuevas clases y estas a su vez, para crear nuestros propios componentes y estilos.

Este paradigma no plantea construir componentes con nuestro CSS, sino clases muy pequeñas con un objetivo bien definido, es decir, llevar el principio de responsabilidad única al CSS.

Para crear nuestros componentes, vamos a componer estas clases utilitarias (no estamos limitados a las que provee el framework, podemos extenderlas, modificarlas y agregar nuestras propias clases fácilmente) directamente en el HTML.

Beneficios

• No tenemos que pelear contra la especificidad del framework para redefinir estilos
• Tenemos mucho control sobre la especificidad: al utilizar siempre estilos basados en clases y el approach funcional, nuestra UI termina siendo mucho más predecible y consistente
• Descriptivo: con leer el nombre de las clases entendemos qué está pasando
• Prácticamente no escribimos CSS
• Evitamos la duplicación de código utilizando clases utilitarias
• Evitamos el código zombie usando plugins como purgecss
• Mobile-first, responsive design: Tailwind cuenta con breakpoints predefinidos y es muy fácil aplicarlos a cualquier clase para tener diseños totalmente responsivos
• Productividad: por todos los ítems anteriores, desarrollar interfaces con Tailwind termina resultando mucho más eficiente, escribimos mucho menos código y resulta mucho más fácil de mantener

Características

• Utility-first
• Responsive Design
• Pseudo-Clases
• Base Styles
• Extraer Componentes
• Agregar nuevas clases utilitarias
• Funciones y Directivas

Guías y tutoriales

• Ver la documentación oficial
• ⭐️ Screencasts
• Introduction to Tailwind CSS
• ⭐️ Designing with Tailwind CSS
• Why you don't need BEM with utility-first CSS
• Adam Wathan - Tailwind CSS Best Practice Patterns

Setup

npm init -y

Instalar el framework con NPM (el ejemplo incluye PostCSS y algunos plugins, pero podemos instalar sólo tailwindcss si queremos):

npm i tailwindcss postcss-cli autoprefixer @fullhuman/postcss-purgecss cssnano

Es recomendable definir una estructura de directorios donde separemos src (donde estará el css base) y dist (donde estará el CSS compilado)

src
 |--- index.html
 |--- styles.css
dist
 |--- index.html
 |--- styles.css

Luego, agregar las directivas a nuestro archivo css base (styles.css en el diagrama de arriba), que luego compilaremos

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

Agregar al package.json, en la sección de scripts, un script para compilar y generar el CSS

Ejemplo de script

"scripts": {
  "build:css": "tailwind build src/styles.css -o dist/compiled.css"
}

Crear tailwind.config.js

Este es el archivo que vamos a utilizar para sobreescribir (si es necesario) estilos default de Tailwind

npx tailwind init

Crear postcss.config.js

• Ver postcss-cli

Ejemplo de config (postcss.config.js)

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano')({
  preset: 'default'
});
const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./dist/*.html'],
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});

module.exports = {
  plugins: [tailwindcss, autoprefixer, purgecss, cssnano]
};

Ahora podemos modificar el script de build para que use postcss-cli

"scripts": {
  "build:css": "postcss src/styles.css -o dist/compiled.css"
}

modo dev con live-server

1. Instalar de forma global el módulo live-server
2. Agregar el script dev a nuestro package.json para correr la aplicación en modo desarrollo

"scripts": {
  "build:css": "postcss src/styles.css -o dist/compiled.css",
  "dev": "live-server dist"
}

VSCode Plugin

• ⭐️ Recomendado: instalar el plugin Tailwind CSS IntelliSense en VSCode

⭐️ Componentes

¿Qué pasa si nos encontramos repitiendo ciertas combinaciones de clases continuamente? Para evitar esto, podemos extraer los patrones de clases a componentes

• Extracting Components
• Extracting Reusable Components
• Components Examples

⭐️ tailwindcomponents: repositorio de componentes comunitario

⭐️ Tailwind Toolbox: templates, componentes y recursos

Custom config

• Ejecutar npx tailwind init para generar el tailwind.config.js
• Ver Configuration

Extender Tailwind con nuevas clases

• Ver How to Extend Tailwind CSS

⭐️ Eliminar CSS redundante con PurgeCSS

• npm install -g postcss-cli
• How to setup Tailwind with PurgeCSS and PostCSS
• Ver Designing with Tailwind CSS: Optimizing for Production with Purgecss
• Disabling unused utilities and variants

Recursos (imágenes, ilustraciones, íconos, etc)

• Ver resources
• Build with Tailwind