Setup

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

Prerequisites

Tailwind 2 needs PostCSS 8, to work with Nuxt 2, this module uses @nuxt/postcss8 that requires Nuxt >= 2.15.3.

Please make sure to update your Nuxt version to be minimum v2.15.3.

yarn upgrade nuxt
npm update nuxt

Installation

  1. Add @nuxtjs/tailwindcss and postcss dependencies to your project:

    yarn add --dev @nuxtjs/tailwindcss postcss@latest
    
    npm install --save-dev @nuxtjs/tailwindcss postcss@latest
    
  2. Add it to your buildModules section in your nuxt.config.js:

    nuxt.config.js
    export default {
      buildModules: ['@nuxtjs/tailwindcss']
    }
    
  3. Create your tailwind.config.js running:

    npx tailwindcss init
    

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

Discover your color palette based on your Tailwind config with the Tailwind viewer.

Tailwind Just-In-Time

Tailwind recently released @tailwindcss/jit to make the web development much faster.

To activate the option, set jit: true in your nuxt.config.js:

nuxt.config.js
export default {
  tailwindcss: {
    jit: true
  }
}

Restart your Nuxt server and see how fast it is now ⚡️

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.

Edit this page on GitHub Updated at Thu, Apr 1, 2021