Tailwind es un framework CSS que permite el diseño de sitios web de una manera ágil y muy amistosa para el desarrollador. Ofrece una interfaz para el desarrollo de las hojas de estilo en cascada muy cercana al propio lenguaje CSS, que se aplica mediante clases de utilidad.

Es una manera rápida de desarrollar, en la que se requiere escribir poco o nada de CSS, ya que el propio framework ofrece prácticamente todos los estilos mediante clases, que nosotros podemos aplicar directamente en el código HTML.

Tailwind tiene muchas ventajas con respecto a frameworks de diseño más tradicionales como Bootstrap. Más adelante explicaremos con detalle cuáles son estas ventajas y por qué Tailwind es una alternativa muy a tener en cuenta. Sin embargo, en este artículo vamos a comenzar directamente por la práctica, explicando cómo empezar a usar esta herramienta.

Modos de trabajo posibles para Tailwind

Tailwind es un framework que requiere cierto setup para comenzar a trabajar. Aunque existe la posibilidad de instalarlo en una página mediante un CDN, no ofrece ni de lejos la mejor alternativa de integración en un proyecto frontend.

De hecho, Tailwind está pensado para que, cuando lo uses, siempre tengas en mente la optimización del CSS resultante. Por ello, para usar Tailwind lo tendrás que integrar con alguna de las herramientas que uses en tu proyecto para compilar el Javascript o el CSS. Algunas alternativas de integración serían por ejemplo Webpack, PostCSS o Laravel Mix, por poner varios ejemplos.

En este artículo vamos a explicar la manera más directa de usar Tailwind, que es mediante un plugin de PostCSS.

Cómo instalar Tailwind con PostCSS

Trabajar con Tailwind sobre PostCSS se hace muy sencillo. Además, PostCSS no es nada complicado de usar y, de paso que aprendes a integrar Tailwind aprenderás también a sacarle partido a otra herramienta excelente para tus CSS, si es que no lo usas todavía.

Comenzamos configurando PostCSS en el proyecto. Esto requiere una serie de pasos, que están explicados en el artículo de las PostCSS.

Instalamos TailwindCSS

PostCSS se organiza mediante una serie de plugins que instalaremos bajo demanda, dependiendo de las transformaciones que se deseen realizar sobre el CSS del proyecto. Así pues, una vez instalado PostCSS, tendremos que instalar el plugin para realizar el trabajo con Tailwind.

Este es el comando para instalar el plugin de TailwindCSS para PostCSS.

npm i -D tailwindcss

Ahora creamos el archivo de configuración de TailwindCSS, que se llama "tailwind.config.js". Este archivo lo puedes crear a mano, pero es más cómodo hacerlo a través de la línea de comandos. Para ello, estando situados con el terminal en la raíz del proyecto, lanzamos el siguiente comando:

npx tailwind init

El archivo de configuración de Tailwind tendrá un código inicial como este:

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

De momento lo vamos a dejar tal cual nos lo ofrecen, puesto que con la configuración predeterminada tenemos suficiente por ahora. Más adelante aprenderemos a configurar el framework, para lo que colocaremos aquí nuestras propias personalizaciones.

Ahora configuramos el plugin de Tailwind para PostCSS, en el archivo "postcss.config.js". Ese fichero deberías haberlo creado anteriormente, cuando hiciste la configuración inicial de PostCSS.

module.exports = {
  plugins: [
    require('tailwindcss'),
    // otros plugins de postcss que desees usar, como autoprefixer
  ]
}

Como puedes comprobar, en el array de plugins de PostCSS estamos haciendo el "require" del plugin "tailwindcss". Por supuesto, podemos usar otros plugins de PostCSS, como por ejemplo "autoprefixer", en cuyo caso tendríamos un código como este:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Autoprefixer sirve para asegurarnos que los prefijos necesarios se coloquen después de haber realizado el proceso de generación del CSS de Tailwind. Por supuesto, si lo usas tendrías que haber instalado autoprefixer con npm previamente (npm install -D autoprefixer).

Comenzar a usar Tailwind en nuestro archivo CSS

Para usar Tailwind partimos del CSS del proyecto, que si estamos comenzando será un archivo con extensión .css que inicialmente estará vacío.

En ese archivo archivo CSS es donde comenzaremos a incluir las clases que nos proporciona TailwindCSS, usando unas directivas específicas en el código CSS, que podrán ser interpretadas y resueltas por el plugin de Tailwind de PostCSS.

Para nuestro proyecto, ese archivo lo vamos a colocar en la ruta: src/css/styles.css, pero realmente podría usarse cualquier ruta que creas conveniente, es decir, lo harás de tal manera que se adapte a tu proyecto y a tus costumbres.

En todo caso, el archivo CSS tendrá el siguiente código:

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

Este código hace uso del framework TailwindCSS, creando los bloques de código CSS generados por el framework:

• Base: es el código base del framework, comenzando por el típico "normalize".
• Components: son los componentes que te ofrece de base Tailwind.
• Utilities: las clases de utilidad, el auténtico corazón de TailwindCSS.

Ejecutar el compilado del CSS con PostCSS

Esta parte consiste más en la configuración del propio PostCSS, que en algo específico de Tailwind. Básicamente necesitamos ejecutar PostCSS para generar el código CSS que nos ofrece el framework TailwindCSS.

Para compilar este CSS necesitamos crear un script de npm. Esto ya lo explicamos en el proceso de configuración de PostCSS, pero básicamente consistirá editar el archivo "package.json", en el que colocaremos una configuración de scripts que incluya el comando de compilación, que sería algo parecido a esto:

"scripts": {
  "build": "postcss src/css/styles.css --output dist/css/styles.css"
},

Ahora podemos lanzar el proceso de build de PostCSS, para que genere el CSS de nuestro proyecto:

npm run build

Se habrá generado un archivo CSS de salida en dist/css/styles.css. No te asustes porque el CSS sea enorme!! luego veremos la manera de optimizar esta compilación y quedarnos con lo que realmente estamos utilizando en nuestra aplicación.

Desarrollar el HTML apoyándonos en TailwindCSS

En este punto por fin ya podemos probar Tailwind y crear un archivo HTML que use las clases que se han generado al compilar el CSS del proyecto.

Para ello vamos a generar un archivo index.html en la carpeta "dist" que se ha generado al compilar el CSS, con un código como este:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo de Tailwind</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
  <h1 class="text-3xl font-light text-center text-orange-600">Hola mundo!!</h1>
  <p class="mt-4 text-xl italic text-center text-gray-800">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
  <div class="text-center mt-4">
    <a href="#" class="bg-orange-600 text-white px-4 py-2 font-bold uppercase rounded-xl tracking-wider">Entrar</a>
  </div>
</body>
</html>

Ahora puedes guardar el archivo HTML y abrirlo con el navegador, para ver el resultado que se ha producido. Si no se ha enlazado bien el CSS mira que el proceso de build te haya dejado el archivo de estilos en el lugar adecuado y que esté bien enlazado con la etiqueta LINK desde el HTML.

Como ves en el HTML hemos colocado 3 elementos, un encabezamiento, un párrafo y una división con un enlace. Todos ellos tienen clases generadas por el CSS de Tailwind, que se aplican para dar estilos a los elementos.

Como habrás podido imaginar, existen cientos (en realidad miles) de clases de utilidad en Tailwind para hacer prácticamente cualquier cosa que puedas necesitar, sin tener que editar los estilos, simplemente agregando las clases adecuadas.

Conclusión

Hemos podido realizar todos los pasos para configurar PostCSS en nuestro proyecto, con el plugin de Tailwind, de modo que podamos comenzar a compilar el CSS del framework. Luego hemos creado el primer HTML de un proyecto, simplemente para ver cómo se aplican las clases que nos ofrece TailwindCSS.

El proceso de configuración probablemente te parezca un poco largo, pero una vez lo tienes listo el flujo de desarrollo se realiza de manera muy ágil. En artículos sucesivos veremos todavía cómo optimizar el proceso un poco más y por supuesto, como reducir drásticamente el peso del código CSS generado.

En lo que respecta al HTML, la dificultad ahora radica en acostumbrarse a usar estas clases, aunque la verdad es que tienen nombres bastante intuitivos y es fácil deducir cuál tienes que usar, después de un tiempo trabajando con el framework. Eso sí, necesitarás conocer CSS porque la mayoría de clases aplican directamente a un atributo CSS y un valor determinado. Al principio se hará más necesario consultar la documentación constantemente, pero más adelante podrás naturalizar el proceso de asignación de clases.

En el siguiente artículo te explicaremos mejor el enfoque de Tailwind y por qué consideramos un framework mucho mejor diseñado que otros más tradicionales como Bootstrap. También te daré explicaré por qué te gustará y te resultará especialmente apropiado, en el caso que ya tengas cierto dominio sobre las CSS.

Tal como hemos dejado el ejemplo hasta aquí, el código con todos los archivos del proyecto se puede ver en este enlace de GitHub.

Videotutorial de TailwindCSS

Te dejamos con un videotutorial de Tailwind CSS que seguro te va a interesar. Es la primera clase del Curso de Tailwind CSS de EscuelaIT que impartimos en abierto en diciembre de 2020, que aborda Tailwind 2.0.

En este vídeo avanzamos bastante en el conocimiento del framework, abordando algunos temas adicionales a los que hemos tratado en este artículo y que veremos más adelante en el Manual de TailwindCSS. Son los siguientes:

• Qué es Tailwind CSS
• Arrancar con PostCSS
• Arrancar con Tailwind CSS
• Flujo de desarrollo
• Creación de componentes