Setup

Using TailwindCSS in your Nuxt project is only one command away ✨

Installation

Add @nuxtjs/tailwindcss dependency to your project:

yarn add --dev @nuxtjs/tailwindcss
npm install --save-dev @nuxtjs/tailwindcss

Then add it to your buildModules section in your nuxt.config.js:

nuxt.config.js
export default {
  buildModules: ['@nuxtjs/tailwindcss']
}

If you are using nuxt < 2.9.0, use the modules property instead.

That's it! You can now use Tailwind classes in your Nuxt app ✨

Discover your color palette based on your Tailwind config on /_tailwind route.

Tailwind Files

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

  • ./assets/css/tailwind.css
  • ./tailwind.config.js

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

You can configure the paths in the module options.

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

Options

You can customize the module behaviour by using the tailwindcss property in nuxt.config.js:

nuxt.config.js
export default {
  tailwindcss: {
    // Options
  }
}

See the module options.

Upgrading Tailwind

Tailwind 2

Nuxt 2.14 is still using PostCSS 7, we have a pull request opened to upgrade the dependencies. Once merged on v2.15, we will release a major version of this module to include TailwindCSS 2, see PR#203.

In the meantime, you can upgrade Tailwind by using the compatibility build:

yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Please ensure you are using Node >= 12.13.0 in order to use version 2 of TailwindCSS.

We have seen an issue with NPM regarding the packages resolution (see comment), we highly recommend using Yarn V1 when working with Nuxt 2.

Tailwind 1

When a new version of Tailwind CSS is released, you don't need to wait for this module to upgrade, you can directly upgrade your dependencies.

yarn upgrade
npm update