Nuxt Tailwind

📖 Documentation | ▶️ Play online | ✨ Release Notes

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

Quick Setup

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

npx nuxi@latest module add tailwindcss

..or install using your dependency manager

# Using pnpm
pnpm add --save-dev @nuxtjs/tailwindcss

# Using yarn
yarn add --dev @nuxtjs/tailwindcss

# Using npm
npm install --save-dev @nuxtjs/tailwindcss

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

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss'
  ]
})

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

Contributing

You can contribute to this module online:

..or locally

Clone this repository
Install dependencies using pnpm i
Prepare for development using pnpm dev:prepare
Start development server using pnpm dev

Docs

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

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

Check out the deployment documentation for more information.

License

MIT - Made with 💚

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!