TailwindCSS module for Nuxt.js with nuxt-purgecss + modern css โก๏ธ
- ๐ Release Notes
- ๐ Online playground
- ๐ฟ CSS Nesting Module Draft
- Add
@nuxtjs/tailwindcss
dependency to your project
npm install --save-dev @nuxtjs/tailwindcss # or yarn add --dev @nuxtjs/tailwindcss
- Add
@nuxtjs/tailwindcss
to thebuildModules
section ofnuxt.config.js
< 2.9.0
, use modules
instead.
{
buildModules: [
'@nuxtjs/tailwindcss'
]
}
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: [
'@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
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
Copyright (c) Nuxt.js Team