Instalar Tailwind CSS con Nuxt

Configuración de Tailwind CSS en un proyecto Nuxt.

Crear tu proyecto

Comienza creando un nuevo proyecto Nuxt si aún no tienes uno configurado. El enfoque más común es utilizar Create Nuxt.

Terminal

npm create nuxt my-projectcd my-project

Instalar Tailwind CSS

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

Terminal

npm install tailwindcss @tailwindcss/vite

Configurar el plugin de Vite

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

nuxt.config.ts

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

Importar Tailwind CSS

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

main.css

@import "tailwindcss";

Añadir el archivo CSS globalmente

Añade tu archivo ./app/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: "2025-07-15",  devtools: { enabled: true },  css: ['./app/assets/css/main.css'],  vite: {    plugins: [      tailwindcss(),    ],  },});

Iniciar tu proceso de compilación

Ejecuta tu proceso de compilación con npm run dev.

Terminal

npm run dev

Comenzar a usar Tailwind en tu proyecto

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

app.vue

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