Setup

Using Tailwind CSS in your Nuxt project is only one command away ✨


Installation

  1. Add @nuxtjs/tailwindcss dependency to your project:
Yarn
yarn add --dev @nuxtjs/tailwindcss
NPM
npm install --save-dev @nuxtjs/tailwindcss
  1. Add it to your modules section in your nuxt.config:
nuxt.config
export default {  modules: ['@nuxtjs/tailwindcss']}
  1. Create your tailwind.config.js by 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 Files

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

  • ./assets/css/tailwind.css
  • ./tailwind.config.{js,ts}

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.

TypeScript (optional)

Officially Tailwind config files are plain JavaScript, however with this module, you can optionally use a TypeScript file for your config.

To do so, rename tailwind.config.js to tailwind.config.ts and use the types from the tailwindcss module.

tailwind.config.ts
import { Config } from 'tailwindcss'export default <Config> {  theme: {    extend: {}  },}

Options

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

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

See the module options.