Nuxt Tailwind

Tailwind CSS module for Nuxt ⚡️

• ✨  Release Notes
• ▶️ Play online
• 📖  Documentation

Features

• 👌  Zero configuration to start
• 🪄  Includes CSS Nesting with postcss-nesting
• 🎨  Discover your Tailwind Config & Colors (see video)
• ⚙️  Reference your Tailwind config in your app
• 📦  Extendable by Nuxt modules using hooks
• 🚀  Supports both Nuxt 3 and Nuxt 2

📖  Read more

Quick Setup

Add @nuxtjs/tailwindcss using the Nuxt CLI to your project

1npx nuxi@latest module add tailwindcss

or add @nuxtjs/tailwindcss using your dependency manager

1# Using pnpm
2pnpm add --save-dev @nuxtjs/tailwindcss
3
4# Using yarn
5yarn add --dev @nuxtjs/tailwindcss
6
7# Using npm
8npm install --save-dev @nuxtjs/tailwindcss

and then to the modules section of nuxt.config.{ts,js}

1export default defineNuxtConfig({
2  modules: [
3    '@nuxtjs/tailwindcss'
4  ]
5})

That's it! You can now use Tailwind classes in your Nuxt app ✨

You can test latest additions on Nightly Releases!

📖  Read more

Contributing

You can contribute to this module online:

Or locally:

1. Clone this repository
2. Install dependencies using pnpm i
3. Prepare for development using pnpm dev:prepare
4. Start development server using pnpm dev

Docs

You can run docs/ locally by using pnpm docs:dev, or to run a build:

1. Make sure to add your Nuxt UI Pro license in the .env file before building the application.
2. Run SSG build using pnpm docs:build
3. Review the production build locally using pnpm docs:preview

Check out the deployment documentation for more information.

License

MIT - Made with 💚