hecktarzuli / tailwindcss-module

TailwindCSS module for Nuxt.js with PurgeCSS

TailwindCSS module for Nuxt.js with nuxt-purgecss + modern css ⚡️

Infos

• 📖 Release Notes
• 🏀 Online playground
• 🌿 CSS Nesting Module Draft

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

⚠️ If you are using Nuxt < 2.9.0, use modules instead.

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

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 nuxt-purgecss 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',
    purgeCSSInDev: false
  }
}

To enable purgeCSS in development, set purgeCSSInDev: true, be careful that it will slow down your development process.

If you want to set any (additional) purgeCSS configuration options, you can add a purgeCSS configuration object:

// nuxt.config.js
{
  purgeCSS: {
    whitelist: ['css-selector-to-whitelist'],
  },
}

See full options here: https://github.com/Developmint/nuxt-purgecss#options

You can also use CSS comments to tell purgeCSS to ignore some blocks:

/* purgecss start ignore */
@import '@snackbar/core/dist/snackbar.css';
/* purgecss end ignore */

Development

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

License

MIT License

Copyright (c) Nuxt.js Team