Setup

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

Installation

1. Add @nuxtjs/tailwindcss dependency to your project:

yarn add --dev @nuxtjs/tailwindcss

npm install --save-dev @nuxtjs/tailwindcss

2. Add it to your modules section in your nuxt.config:

export default defineNuxtConfig({    modules: ['@nuxtjs/tailwindcss']})

export default {  modules: ['@nuxtjs/tailwindcss']}

Tailwind Files

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

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

If they don't exist, the module will inject a basic configuration for each one so you don't have to create these files.

If you're going to create your own Tailwind CSS file, make sure to add the @tailwind directives for each of Tailwind’s layers.

@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:

export default {  tailwindcss: {    // Options  }}

See the module options.