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 ✨

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

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