# @nuxtjs/tailwindcss > Tailwind CSS module for Nuxt Latest version **6.14.0** (published 2025-04-27) · MIT license · 0 weekly downloads ## Install ```sh npm install @nuxtjs/tailwindcss pnpm add @nuxtjs/tailwindcss yarn add @nuxtjs/tailwindcss bun add @nuxtjs/tailwindcss ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score. Warnings: low downloads. Negative: stale. ## Facts | | | |---|---| | Version | 6.14.0 | | Published | 2025-04-27 | | First published | 2019-04-04 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 16 | | Unpacked size | 100.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1869 | | Maintainers | clarkdo, pi0, atinux, alexchopin, danielroe, antfu, ineshbose | ## Links - npm: https://www.npmjs.com/package/@nuxtjs/tailwindcss - Repository: https://github.com/nuxt-modules/tailwindcss - Homepage: https://github.com/nuxt-modules/tailwindcss#readme - Issues: https://github.com/nuxt-modules/tailwindcss/issues - npm.io page: https://npm.io/package/@nuxtjs/tailwindcss ## Dependencies (16) - [h3](https://npm.io/package/h3.md) ^1.15.1 - [c12](https://npm.io/package/c12.md) ^3.0.2 - [ufo](https://npm.io/package/ufo.md) ^1.5.4 - [defu](https://npm.io/package/defu.md) ^6.1.4 - [klona](https://npm.io/package/klona.md) ^2.0.6 - [ohash](https://npm.io/package/ohash.md) ^2.0.11 - [pathe](https://npm.io/package/pathe.md) ^2.0.3 - [unctx](https://npm.io/package/unctx.md) ^2.4.1 - [consola](https://npm.io/package/consola.md) ^3.4.0 - [postcss](https://npm.io/package/postcss.md) ^8.5.3 - [@nuxt/kit](https://npm.io/package/@nuxt/kit.md) ^3.16.0 - [pkg-types](https://npm.io/package/pkg-types.md) ^2.1.0 - [tailwindcss](https://npm.io/package/tailwindcss.md) ~3.4.17 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.4.20 - [postcss-nesting](https://npm.io/package/postcss-nesting.md) ^13.0.1 - [tailwind-config-viewer](https://npm.io/package/tailwind-config-viewer.md) ^2.0.4 ## Recent versions - 6.14.0 (latest) — 2025-04-27 - 6.14.1-20250511-145209-83ee56b (nightly) — 2025-05-11 - 5.0.0-0 (prerelease) — 2022-02-08 - 4.0.0-12 (alpha) — 2021-03-15 - 7.0.0-beta.1 — 2025-09-03 - 7.0.0-beta.0 — 2025-05-24 - 6.14.0-20250426-121731-6bc319c — 2025-04-26 - 6.14.0-20250425-191014-9cc0bd5 — 2025-04-25 - 6.14.0-20250425-132432-680246d — 2025-04-25 - 6.14.0-20250424-101458-103b18d — 2025-04-24 - 6.13.3-20250420-215513-4eea740 — 2025-04-20 - 6.13.3-20250408-204410-3f59d4a — 2025-04-08 - 6.13.3-20250408-110514-4a4af2c — 2025-04-08 - 6.13.3-20250408-103736-d3e4de7 — 2025-04-08 - 6.13.3-20250403-163632-f767243 — 2025-04-03 - … 214 more at https://npm.io/package/@nuxtjs/tailwindcss/versions ## README [![@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/social-card.png)](https://tailwindcss.nuxtjs.org) # Nuxt Tailwind [![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] [![License][license-src]][license-href] [![Nuxt][nuxt-src]][nuxt-href] [![Tailwind CSS][tw-src]][tw-href] [![Volta board][volta-src]][volta-href] Enable [Tailwind CSS](https://tailwindcss.com) for [Nuxt](https://nuxt.com) ⚡️ [📖  Documentation](https://tailwindcss.nuxtjs.org) | [▶️ Play online](https://stackblitz.com/github/nuxt-modules/tailwindcss) | [✨  Release Notes](https://github.com/nuxt-modules/tailwindcss/releases) ## Features - 👌  Zero configuration to start - 🪄  Includes [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) with [postcss-nesting](https://github.com/csstools/postcss-nesting) - 🎨  Discover your Tailwind Config & Colors *([see video](https://tailwindcss.nuxtjs.org/getting-started/module-options#viewer))* - ⚙️  [Reference your Tailwind config](https://tailwindcss.nuxtjs.org/tailwindcss/configuration/#referencing-in-the-application) in your app - 📦  Extendable by [Nuxt modules](https://nuxt.com/modules) using [hooks](https://tailwindcss.nuxtjs.org/tailwindcss/config#hooks) - 🚀  Supports both [Nuxt 3](https://nuxt.com) and [Nuxt 2](https://v2.nuxt.com/) ## Quick Setup Add `@nuxtjs/tailwindcss` using the [Nuxt CLI](https://github.com/nuxt/cli) to your project ```bash npx nuxi@latest module add tailwindcss ```
..or install using your dependency manager ```bash # 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}` ```ts 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: [![Edit @nuxtjs/tailwindcss in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/nuxt-modules/tailwindcss/tree/main/?fontsize=14&hidenavigation=1&theme=dark) [![Edit @nuxtjs/tailwindcss in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/nuxt-modules/tailwindcss)
..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 [![Nuxt UI Pro](https://img.shields.io/badge/Made%20with-Nuxt%20UI%20Pro-00DC82?logo=nuxt.js&labelColor=020420)](https://ui.nuxt.com/pro) You can run `docs/` locally by using `pnpm docs:dev`, or to run a build: 1. Make sure to add your [Nuxt UI Pro](https://ui.nuxt.com/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](https://nuxt.com/docs/getting-started/deployment) for more information. ## License [MIT](./LICENSE) - Made with 💚 [npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/tailwindcss/latest.svg?style=flat&colorA=18181B&colorB=28CF8D [npm-version-href]: https://npmjs.com/package/@nuxtjs/tailwindcss [npm-downloads-src]: https://img.shields.io/npm/dm/@nuxtjs/tailwindcss.svg?style=flat&colorA=18181B&colorB=28CF8D [npm-downloads-href]: https://npmjs.com/package/@nuxtjs/tailwindcss [license-src]: https://img.shields.io/npm/l/@nuxtjs/tailwindcss.svg?style=flat&colorA=18181B&colorB=28CF8D [license-href]: https://npmjs.com/package/@nuxtjs/tailwindcss [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?&logo=nuxt [nuxt-href]: https://nuxt.com [tw-src]: https://img.shields.io/badge/tailwindcss-0F172A?&logo=tailwindcss [tw-href]: https://tailwindcss.com [volta-src]: https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg [volta-href]: https://volta.net/nuxt-modules/tailwindcss?utm_source=nuxt_tailwind_readme --- _Source: https://npm.io/package/@nuxtjs/tailwindcss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._