Tailwind CSS module for NuxtJS with modern css ⚡️

Infos

• 📖 Release Notes
• 🏀 Online playground
• 🌿 CSS Nesting Module Draft
• 📐 Display your breakpoints with nuxt-breaky
• 🌓 Dark mode example with tailwindcss-dark-mode and @nuxtjs/color-mode

Setup

1. Add @nuxtjs/tailwindcss dependency to your project

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

2. Add @nuxtjs/tailwindcss to the buildModules section of nuxt.config.js

{
  buildModules: [
    '@nuxtjs/tailwindcss'
  ]
}

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

Usage

This module will automatically create two files in your srcDir:

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

It will also inject the CSS file globally and configure the purge option and postcss-preset-env to stage 1.

Configuration

If you want to set a different path for the configuration file or css file, you can use these given options:

// nuxt.config.js
{
  buildModules: [
    '@nuxtjs/tailwindcss'
  ],
  tailwindcss: {
    configPath: '~/config/tailwind.config.js',
    cssPath: '~/assets/css/tailwind.css',
    exposeConfig: false
  }
}

To enable purgeCSS in development, set purge.enabled: true in tailwind.config.js, be careful that it will slow down your development process. Learn more on removing unused CSS.

Referencing in JavaScript

It can often be useful to reference tailwind configuration values in runtime. For example to access some of your theme values when dynamically applying inline styles in a component.

If you need resolved tailwind config in runtime, you can enable exposeConfig option in nuxt.config:

// nuxt.config.js
{
  tailwindcss: {
    exposeConfig: true
  }
}

Then import where needed from ~tailwind.config:

// Import fully resolved config
import tailwindConfig from '~tailwind.config'

 // Import only part which is required to allow tree-shaking
import { theme } from '~tailwind.config'

NOTE: Please be aware this adds ~19.5KB (~3.5KB) to the client bundle size.

Contributing

You can contribute to this module online with CodeSandBox:

Or locally:

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using yarn dev or npm run dev

License

MIT License

Copyright (c) Nuxt.js Team