Installation
Setting up Tailwind CSS in a Nuxt project.
Start by creating a new Nuxt project if you don’t have one set up already. The most common approach is to use Create Nuxt.
npm create nuxt my-projectcd my-project
Install @tailwindcss/vite
and its peer dependencies via npm.
npm install tailwindcss @tailwindcss/vite
Add the @tailwindcss/vite
plugin to your Nuxt configuration as a Vite plugin.
import tailwindcss from "@tailwindcss/vite";export default defineNuxtConfig({ compatibilityDate: "2025-07-15", devtools: { enabled: true }, vite: { plugins: [ tailwindcss(), ], },});
Create an ./app/assets/css/main.css
file and add an @import
that imports Tailwind CSS.
@import "tailwindcss";
Add your newly-created ./app/assets/css/main.css
to the css
array in your nuxt.config.ts
file.
import tailwindcss from "@tailwindcss/vite";export default defineNuxtConfig({ compatibilityDate: "2025-07-15", devtools: { enabled: true }, css: ['~/assets/css/main.css'], vite: { plugins: [ tailwindcss(), ], },});
Run your build process with npm run dev
.
npm run dev
Start using Tailwind’s utility classes to style your content.
<template> <h1 class="text-3xl font-bold underline"> Hello world! </h1></template>