amirulasyraf88 / nuxt-tailwindcss

TailwindCSS module for Nuxt.js with PurgeCSS

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

Infos

• 📖 Release Notes
• 🏀 Online playground

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 devModules section of nuxt.config.js

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

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