Getting Started

Setup

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

Installation

  1. Install @nuxtjs/tailwindcss dependency to your project:
yarn add -D @nuxtjs/tailwindcss
  1. Add it to your modules section in your nuxt.config:
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})
That's it! You can now use Tailwind classes in your Nuxt app ✨
For Nuxt 2.15 and lower, also add @nuxt/postcss8 to your dependencies.
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).

~/assets/css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

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

Options

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

nuxt.config.ts
export default defineNuxtConfig({
  tailwindcss: {
    // Options
  }
})

See the module options.


Copyright © 2023