Installation

Installation

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

npx nuxi@latest module add tailwindcss

2. If not already done, add it to your modules section in your nuxt.config:

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

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:

{
  "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:

{
  "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

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.

Options

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

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

See the module options.