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

README.md

nuxt-tailwindcss

npm version npm downloads circle ci coverage License

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

Infos

Setup

  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: [
    '@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'
  }
}

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

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

You can’t perform that action at this time.