Introducción

Class container >>

Instalación y configuración - Tailwind v4.0

Instalamos tailwind en nuestro proyecto vite

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

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="style.css">
  </head>
  <body>
    <p class="text-xs">Hola</p>
    <p class="text-base">Mundo</p>
    <p class="text-5xl">Grande</p>
  </body>
</html>

Class container >>