Instalar Tailwind CSS con Nuxt

Configurando Tailwind CSS en un proyecto Nuxt.

Crea tu proyecto

Comienza creando un nuevo proyecto Nuxt si aún no tienes uno configurado. El enfoque más común es usar la Interfaz de línea de comandos de Nuxt.

Terminal

npx nuxi init my-project
cd my-project

Instala Tailwind CSS

Instala @tailwindcss/vite y sus dependencias peer a través de npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Configura el plugin de Vite

Añade el plugin @tailwindcss/vite a tu configuración de Nuxt como un plugin de Vite.

nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
});

Importa Tailwind CSS

Crea un archivo ./assets/css/main.css y añade un @import que importe Tailwind CSS.

main.css

@import "tailwindcss";

Añade el archivo CSS globalmente

Añade tu archivo ./assets/css/main.css recién creado al array css en tu archivo nuxt.config.ts.

nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
});

Inicia tu proceso de build

Ejecuta tu proceso de build con npm run dev.

Terminal

npm run dev

Comienza a usar Tailwind en tu proyecto

Comienza a usar las clases de utilidad de Tailwind para estilizar tu contenido.

app.vue

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>