Styling Nuxt.js Apps with Tailwind CSS: Complete Beginner Guide

Modern web apps demand speed, consistency, and scalability—both in performance and styling. Nuxt.js paired with Tailwind CSS gives you exactly that: a powerful Vue framework with a utility-first CSS system that helps you build beautiful UIs fast.

This beginner-friendly guide walks you through setting up Tailwind CSS in a Nuxt  app.

Why Use Tailwind CSS with Nuxt.js?

Nuxt already provides you with SSR, routing, and performance optimizations out of the box. Tailwind complements it perfectly.

Key benefits:

•  Rapid UI development with utility classes
•  Consistent design system without custom CSS bloat
•  Smaller CSS bundles thanks to JIT compilation
• Easy, responsive and dark mode styling
• Great DX with auto-completion and Vue support

Prerequisites

Before you start, make sure you have:

• Basic knowledge of HTML & CSS
• Familiarity with Vue.js (helpful, not mandatory)
• Node.js v18+ installed

Setting up Tailwind CSS  in a Nuxt 3 project is straightforward thanks to the official @tailwindcss/vite plugin. Follow these steps carefully.

01. Create Your Nuxt Project

Start by creating a new Nuxt project if you don’t already have one. The recommended approach is using Create Nuxt.

npm create nuxt my-project
cd my-project

02. Install Tailwind CSS

Install Tailwind CSS  along with the official Vite plugin.

npm install tailwindcss @tailwindcss/vite

03. Configure the Vite Plugin

Add the Tailwind Vite plugin to your Nuxt configuration.

// nuxt.config.ts
import tailwindcss from '@tailwindcss/vite'
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  vite: {
    plugins: [tailwindcss()],
  },
})

04. Import Tailwind CSS

Create a global CSS file and import Tailwind.

File: ./app/assets/css/main.css

@import "tailwindcss";

05. Register the CSS File Globally

Add the CSS file to the css array in your Nuxt config.

// 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()],
  },
})

06. Start the Development Server

Run the Nuxt development server.

npm run dev

07. Start Using Tailwind in Nuxt

You can now use Tailwind utility classes anywhere in your Nuxt app.

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

Your Nuxt app is now fully set up with Tailwind CSS. 

Adding Custom Styles

Best practices for adding your own custom styles in Tailwind projects.

Often, the biggest challenge when working with a framework is figuring out what to do when you need something the framework doesn’t handle for you.

Tailwind CSS has been designed from the ground up to be extensible and customizable, so no matter what you’re building, you never feel like you’re fighting the framework.

This section covers customizing your design tokens, breaking out of constraints when necessary, adding your own custom CSS, and extending Tailwind using modern Tailwind features.

Customizing Your Theme

If you want to change things like your color palette, spacing scale, typography scale, or breakpoints, you can customize them directly in your CSS using the @theme directive (Tailwind CSS ).

@theme {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 120rem;
--color-avocado-100: oklch(0.99 0 0);
--color-avocado-200: oklch(0.98 0.04 113.22);
--color-avocado-300: oklch(0.94 0.11 115.03);
--color-avocado-400: oklch(0.92 0.19 114.08);
--color-avocado-500: oklch(0.84 0.18 117.33);
--color-avocado-600: oklch(0.53 0.12 118.34);
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
--ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}

This approach keeps your design tokens close to your CSS, reduces config bloat, and aligns with Tailwind’s minimal-configuration philosophy.

Using Arbitrary Values

While most designs can be built using a constrained set of utilities, sometimes you need pixel-perfect control.

When that happens, Tailwind lets you generate utilities on the fly using square bracket notation.

<div class="top-[117px]">
<!-- ... -->
</div>

You can combine arbitrary values with responsive and state modifiers:

<div class="top-[117px] lg:top-[344px]">
<!-- ... -->
</div>

This works across the framework—background colors, font sizes, and even pseudo-elements:

<div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
<!-- ... -->
</div>

If you’re referencing a CSS variable, you can use the custom property shorthand:

<div class="fill-(--my-brand-color)">
<!-- ... -->
</div>

This is shorthand for:

fill-[var(--my-brand-color)]

Arbitrary Properties

If you ever need a CSS property that Tailwind doesn’t provide a utility for, you can write fully arbitrary CSS properties directly in your class list.

<div class="[mask-type:luminance]">
<!-- ... -->
</div>

You can also combine them with modifiers:

<div class="[mask-type:luminance] hover:[mask-type:alpha]">
<!-- ... -->
</div>

This is especially useful when working with CSS variables that change based on screen size or state:

<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
<!-- ... -->
</div>

Arbitrary Variants

Arbitrary variants let you modify selectors on the fly, similar to hover: or md: variants, but with custom selectors using square brackets.

<ul role="list">
 {#each items as item}
 <li class="lg:[&:nth-child(-n+3)]:hover:underline">{item}</li>
 {/each}
</ul>

Conclusion

Styling Nuxt.js apps with Tailwind CSS is one of the fastest and cleanest ways to build modern user interfaces today. With Nuxt handling performance and routing—and Tailwind handling design—you get a workflow that scales beautifully from small projects to production-grade applications.

Want help building a high-performance Nuxt app styled with Tailwind CSS? Contact us today, and let’s craft a fast, beautiful, and conversion-focused experience together.