Tailwind 4.1

Evolucion al nuevo modelo.

Importante: Hay muchos cambios en la estructura y en la forma de ejecutar los scripts para la renderizacion del css

Mucho mas facil de realizar. Pero tambien exige un minimo de organizacion para le desarrollador

Instalacion.

Install Tailwind CSS Install tailwindcss and @tailwindcss/cli via npm.

npm install tailwindcss @tailwindcss/cli

Configurar el archivo de iniciacion: Importar Tailwind en tu CSS Añadir el @import "tailwindcss"; importar a tu estructura del fichero CSS.

El oficial que se sugiere es ~/src/input.css aunque personalmente lo configuro en mi estructura, ~/assets/src/tailwind.css

@import "tailwindcss";

Iniciar el proceso de compilación (renderizado) de Tailwind CLI Ejecutar la herramienta CLI para escanear los archivos fuente en busca de clases y crear el CSS.

Los ficheros de entrada y salida son los de mis estructuras habituales de assets

El oficial:

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

El de mi infraestructura:

npx @tailwindcss/cli -i ./assets/src/tailwind.css -o ./assets/css/styles.css --watch

El --watch es el que renderiza y y evalua en tiempo real si se ha producido cualquie modigicacion en las paginas o archivos dependientes de los css.

Empezaa a usar Tailwind en el HTML Añade tu archivo CSS compilado al y empieza a usar las clases de utilidad de Tailwind para dar estilo a tu contenido.

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

Tailwind 4.1

Evolucion al nuevo modelo.

Instalacion.

Artículos Relacionados