@nuxtjs/tailwindcss

What is @nuxtjs/tailwindcss?

@nuxtjs/tailwindcss is a Nuxt.js module that integrates Tailwind CSS into your Nuxt.js project. It simplifies the setup and configuration of Tailwind CSS, allowing you to quickly start using Tailwind's utility-first CSS framework in your Nuxt.js applications.

What are @nuxtjs/tailwindcss's main functionalities?

Easy Setup

By adding @nuxtjs/tailwindcss to the buildModules array in your nuxt.config.js file, you can easily set up Tailwind CSS in your Nuxt.js project.

```json
{
  "buildModules": [
    "@nuxtjs/tailwindcss"
  ]
}
```

Custom Configuration

You can customize the Tailwind CSS configuration directly in your nuxt.config.js file, allowing you to extend the default theme, add custom colors, and more.

```json
{
  "tailwindcss": {
    "config": {
      "theme": {
        "extend": {
          "colors": {
            "primary": "#1DA1F2"
          }
        }
      }
    }
  }
}
```

PurgeCSS Integration

The module integrates PurgeCSS to remove unused CSS, optimizing your final build size. You can configure the paths to be scanned for class names in the nuxt.config.js file.

```json
{
  "tailwindcss": {
    "purgeCSS": {
      "enabled": true,
      "content": [
        "./pages/**/*.vue",
        "./components/**/*.vue"
      ]
    }
  }
}
```

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.

README

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 💚

Changelog

v6.13.2

compare changes

🩹 Fixes

• content: Resolve app/ dir for utils, resolves #955 (#955)
• content: Use pages:extend to get page routes (f226a64)
• config: Dedupe tailwind.config from configPaths, closes #949 (#949)

📖 Documentation

• Mention tailwindcss-cli if tailwindcss init fails (#946)
• Direct to v3 tailwindcss docs (a7c54c4)
• Revert to NuxtTailwind (#963)
• Update module-options.md (159ab53)

🏡 Chore

• ci: Fix corepack for actions/setup-node (c996f0a)
• Fix lint (3dd3ada)

❤️ Contributors

• Inesh Bose [e-mail]
• David Marr (@marr)
• Ditmar Entwicklerberg (@entwicklerberg)
• Dev By Ray (@devbyray)