Using Tailwind CSS in your Nuxt project is only one command away ✨


  1. Install @nuxtjs/tailwindcss dependency to your project:
yarn add -D @nuxtjs/tailwindcss
npm install -D @nuxtjs/tailwindcss
pnpm i -D @nuxtjs/tailwindcss
  1. Add it to your modules section in your nuxt.config:
nuxt.config (Nuxt 3)
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
nuxt.config (Nuxt 2)
export default {
  buildModules: ['@nuxtjs/tailwindcss']
That's it! You can now use Tailwind classes in your Nuxt app ✨
Discover your color palette based on your Tailwind config with the Tailwind viewer.

Tailwind Files

When running npm run dev, this module will look for these files:

  • ./assets/css/tailwind.css
  • ./tailwind.config.{js,cjs,mjs,ts}

If these files don't exist, the module will automatically generate a basic configuration for them, so you don't have to create these files manually.

You can create the tailwind.config.js file by running the following command:

npx tailwindcss init
You can configure the paths in the module options.

If you're going to create your own Tailwind CSS file, make sure to add the @tailwind directives for each of Tailwind’s layer types (base, components, and utilities).

@tailwind base;
@tailwind components;
@tailwind utilities;

Learn more about overwriting the Tailwind configuration in the Tailwind Config section.


You can customize the module's behavior by using the tailwindcss property in nuxt.config:

export default defineNuxtConfig({
  tailwindcss: {
    // Options

See the module options.