Setting up Tailwind with NuxtJS is really simple, just add the @nuxtjs/tailwindcss module:
npm install @nuxtjs/tailwindcss
Then add it to your nuxt.config.js
file:
export default {
modules: [
'@nuxtjs/tailwindcss'
]
}
That's it ✨
The module will:
- Create a CSS file for your Tailwind styles in
assets/css/tailwind.css
:
@tailwind base;
@tailwind components;
@tailwind utilities;
- Import this file as global css
- Create a
tailwind.config.js
file.
module.exports = {
theme: {},
variants: {},
plugins: []
}
- Configure nuxt-purgecss
- Set postcss-preset-env to stage 1, learn more here
npm install
npm run dev
npm run build
npm run start
npm run generate