Installation

Install @nuxtjs/tailwindcss dependency to your project:

npx nuxi@latest module add tailwindcss

If not already done, 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.

Nightly Releases

After each commit is merged into the main branch of @nuxtjs/tailwindcss and passing all tests, we trigger an automated npm release using GitHub Actions and changelogen.

You can opt in to use this release channel and avoid waiting for the next release and helping the module by beta testing changes.

The build and publishing method and quality of nightly releases are the same as stable ones. The only difference is that you should often check the GitHub repository for updates. There is a slight chance of regressions not being caught during the review process and by the automated tests. Therefore, we internally use this channel to double-check everything before each release.

Opting into the nightly channel

Update @nuxtjs/tailwindcss dependency inside package.json:

package.json

{
  "devDependencies": {
-   "@nuxtjs/tailwindcss": "^6.10.0"
+   "@nuxtjs/tailwindcss": "npm:@nuxtjs/tailwindcss@nightly"
  }
}

Remove lockfile (package-lock.json, yarn.lock, or pnpm-lock.yaml) and reinstall dependencies.

Opting out from the edge channel

Update @nuxtjs/tailwindcss dependency inside package.json:

package.json

{
  "devDependencies": {
-   "@nuxtjs/tailwindcss": "npm:@nuxtjs/tailwindcss@nightly"
+   "@nuxtjs/tailwindcss": "^6.10.0"
  }
}

Remove lockfile (package-lock.json, yarn.lock, or pnpm-lock.yaml) and reinstall dependencies.

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.

Configuration

Configure Nuxt Tailwind with the `tailwindcss` property.