Primeros Pasos, Instalar Tailwind CSS

¿Cómo instalar Tailwind CSS?

La herramienta tailwind funciona escaneando todos los archivos HTML, los componentes de JavaScript y otras plantillas para buscar clases, generar los estilos correspondientes y escribirlos en un archivo estático CSS.

Vamos a explicar a continuación las diferentes formas de instalación.

Instalación mediante el CLI

La manera mas sencilla de instalar Tailwind CSS es mediante la CLI (Herramienta de la línea de comandos).

Instalar Tailwind CSS.

npm install -D tailwindcss
npx tailwindcss init

Configurar la ruta de las plantillas añadiendo dicha ruta en el archivo tailwind.config.js.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{html,js}'],
    theme: {
        extend: {},
    },
    plugins: [],
}

Agregar las directivas al archivo src/input.css.

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

Arrancar el compilador tailwindcss.

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

Crea el dist/index.html y agrega una llamada al archivo compilado por tailwind.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <link href="output.css" rel="stylesheet" />
    </head>
    <body>
        <h1 class="text-3xl font-bold underline">Hello world!</h1>
    </body>
</html>

Podemos previsualizar los cambios con alguna herramienta como live-server.

npx live-server dist

Y accedemos al url provisto para ver los cambios realizados y el efecto de utilizar las etiquetas de Tailwind CSS.

Actualizamos nuestro archivo html removiendo el underline y veremos los cambios reflejados en el navegador

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <link href="output.css" rel="stylesheet" />
    </head>
    <body>
        <h1 class="text-3xl font-bold underline">Hello world!</h1>
    </body>
</html>

Utilizar Tailwind CSS a través del CLI es una tarea relativamente sencilla, podemos personalizar la ubicación donde las directivas se encuentran y asegurarnos de que se genere un CSS compilado en donde lo necesitemos.