Introducción

Utility classes >>

En este curso nos vamos a centrar en explorar el funcionamiento general del framework de diseño TailwindCSS. La intención no es la de explorar todas propiedades que podemos controlar con dicho framework, ya que para eso está la documentación oficial, sino centrarnos en las más fundamentales para obtener una base sólida del mismo.

Documentación oficial TailwindCSS

Instalación y configuración - Tailwind v4

Proyecto Vite

Instalamos tailwind en nuestro proyecto vite

npm create vite@latest nombre-proyecto -- --template vanilla
cd nombre-proyecto
npm i
npm install tailwindcss @tailwindcss/vite

Añadimos el plugin a nuestro archivo de configuración vite.config.ts

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    tailwindcss()
  ],
});

Finalmente, importas Tailwind al archivo principal de CSS

@import "tailwindcss";

Y ya podemos utilizar Tailwind en nuestro HTML

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite & Tailwind</title>
    <link rel="stylesheet" href="./src/style.css">
  </head>
  <body>
    <p class="text-xs">Hola</p>
    <p class="text-base">Mundo</p>
    <p class="text-5xl">Grande</p>
  </body>
</html>

Proyecto Angular

Desde la versión v21 de Angular, ya te incluye la opción al crear el proyecto de configurar TailwindCSS.

Extensiones para autocompletado

Es muy recomendable instalar la extensión de TailwindCss en el editor VS Code o derivado que estemos utilizando. Esta extensión habilitará el autocompletado de las clases de Tailwind, así como veremos las propiedades CSS aplicadas simplemente con establecer el cursor del ratón encima de una clase, o incluso nos avisará cuando estemos utilizando clases obsoletas o tengamos errores.

Utility classes >>