Skip to content
TailwindCSS module for Nuxt.js with PurgeCSS
JavaScript Vue CSS
Branch: master
Clone or download


npm version npm downloads circle ci coverage License

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



  1. Add @nuxtjs/tailwindcss dependency to your project
npm install --save-dev @nuxtjs/tailwindcss # or yarn add --dev @nuxtjs/tailwindcss
  1. Add @nuxtjs/tailwindcss to the buildModules section of nuxt.config.js

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

  buildModules: [


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.


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: [
  tailwindcss: {
    configPath: '~/config/tailwind.config.js',
    cssPath: '~/assets/css/tailwind.css'

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:


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


MIT License

Copyright (c) Nuxt.js Team

You can’t perform that action at this time.