@nuxtjs/tailwindcss

Nuxt Tailwind

Enable Tailwind CSS for Nuxt ⚡️

📖  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 💚

Similar packages

Other packages similar to @nuxtjs/tailwindcss

nuxt-windicss

nuxt-windicss is a Nuxt.js module that integrates Windi CSS, a utility-first CSS framework similar to Tailwind CSS. It offers faster build times and a smaller bundle size compared to Tailwind CSS.

nuxt-buefy

nuxt-buefy is a Nuxt.js module that integrates Buefy, a lightweight UI component library based on Bulma. While it is not a utility-first CSS framework like Tailwind, it provides a set of ready-to-use components that can be easily customized.

nuxt-vuetify

nuxt-vuetify is a Nuxt.js module that integrates Vuetify, a Material Design component framework. It offers a wide range of pre-designed components and utilities, making it a good alternative for those looking for a more component-driven approach.