# Nuxt Tailwind CSS Module for Tailwind CSS 4

> Nuxt Tailwind is a Nuxt module that integrates Tailwind CSS into a Nuxt application with minimal setup. The v7 branch targets Tailwind CSS 4, while the README points users to v6 for the stable Tailwind CSS 3 release.

**nuxt-modules/tailwindcss** — Tailwind CSS module for Nuxt

- Repository: https://github.com/nuxt-modules/tailwindcss
- Website: https://tailwindcss.nuxtjs.org
- Stars: 1,868 · Forks: 194
- Language: TypeScript
- License: MIT
- Published: 2026-10-16 · Updated: 2026-10-16 · Language: en
- Canonical page: https://hysenlabs.com/projects/nuxt-modules-tailwindcss

## Why Nuxt Tailwind CSS Exists

Nuxt Tailwind CSS solves the connection problem between a Nuxt application and Tailwind CSS. Instead of assembling the module, build tooling, and framework-specific integration separately, a Nuxt project can add @nuxtjs/tailwindcss as a module and begin using Tailwind classes. The README describes zero configuration to start, which is accurate for the basic setup path shown there, although real projects may still need application-level configuration.

The intended audience is Nuxt developers who want Tailwind CSS available in the application without maintaining a large integration layer themselves. The package metadata identifies Nuxt >=3.0.0 as its compatibility range. The repository is primarily TypeScript, and its package entry point is a Nuxt module rather than a general-purpose Tailwind plugin.

There is an important versioning boundary. The README notes that the viewed v7 branch is for Tailwind CSS 4 compatibility. For the current stable release using Tailwind CSS 3, it directs users to the v6 branch. The package file identifies the repository version as 7.0.0-beta.1, so the branch described in the README should not be treated as the stable Tailwind CSS 3 path without checking the intended release.

## How the Module Integrates with Nuxt

Based on the repository layout, the project is built as a Nuxt module package. The package.json configuration key is tailwindcss, and the package exposes the module through ./dist/module.mjs with TypeScript declarations at ./dist/types.d.mts. The dependency list includes @nuxt/kit, @tailwindcss/postcss, @tailwindcss/vite, and tailwindcss itself. Those dependencies indicate that the integration is tied to Tailwind CSS 4 and its PostCSS and Vite-related packages.

The module is loaded through Nuxt's modules configuration. Once loaded, it enables Tailwind CSS processing for the Nuxt application, allowing utility classes in templates to be handled by the Tailwind toolchain. The README also states that other Nuxt modules can extend the integration through hooks. That makes the module useful as a framework-managed integration point, but the excerpt does not enumerate the hook names or describe their payloads, so applications should consult the configuration documentation before designing a dependent module.

The repository contains src, test, and playground directories. Package scripts use nuxt-module-build for preparation and builds, while development commands target the playground through nuxi. This separation indicates that the module itself is built and tested separately from a sample Nuxt application used to exercise it. The repository also includes type-checking, linting, and Vitest scripts, although the README excerpt does not document their output.

## Installing Nuxt Tailwind CSS and Adding the First Classes

The README gives the Nuxt CLI as the shortest setup path. It adds @nuxtjs/tailwindcss to the project and makes the module available for configuration. Run this from the target Nuxt project directory.

```bash
npx nuxi@latest module add tailwindcss
```

The README also provides package-manager alternatives. These commands install the module as a development dependency.

```bash
pnpm add --save-dev @nuxtjs/tailwindcss
yarn add --dev @nuxtjs/tailwindcss
npm install --save-dev @nuxtjs/tailwindcss
```

After installation with a package manager, add the module to nuxt.config.{ts,js}.

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

The README states that Tailwind classes can then be used in the Nuxt application. A first real use would be adding a Tailwind utility class to an existing component or page and starting the Nuxt application through the project's normal Nuxt development command. The README does not provide a separate class example or a required stylesheet import for the v7 branch, so no additional CSS entry point should be assumed from the available documentation.

For contributors working from a checkout rather than an application, the repository README lists clone, dependency installation, preparation, and development commands.

```bash
pnpm i
pnpm dev:prepare
pnpm dev
```

Those commands prepare the module for local development and start the development server for the playground, as described by the repository documentation.

## Tailwind 4 Branch Versus the Stable v6 Path

The most consequential decision is branch selection. The README explicitly says that the v7 branch is intended for Tailwind CSS 4. The package.json supports that interpretation by depending on tailwindcss ^4.1.12, @tailwindcss/postcss ^4.1.12, and @tailwindcss/vite ^4.1.12. The package version is 7.0.0-beta.1, so the repository state described here is a beta line rather than the README's stable v6 guidance.

For an existing Nuxt project already using Tailwind CSS 3, selecting the v7 branch can create a version boundary rather than solve an integration problem. The README directs users who need the stable Tailwind CSS 3 release to the v6 branch. It does not document a migration procedure, compatibility matrix, or rollback instructions. That omission matters for teams upgrading an established application because the source branch and package version must be checked before the dependency is changed.

The compatibility field in package.json says nuxt >=3.0.0. It does not claim support for older Nuxt versions. The dependency ranges also use caret ranges, so installation behavior can depend on the package manager's lockfile and its resolution policy. A project with a committed lockfile should treat the lockfile as the concrete dependency-selection record rather than assuming that the README alone defines the installed versions.

This version split is a real limitation, not a documentation footnote. It makes the module unsuitable as an unexamined drop-in upgrade for projects whose Tailwind major version is fixed by another part of the stack.

## Operational Limits and Failure Cases

The module is specifically tied to Nuxt and Tailwind CSS. It does not provide a standalone CLI for processing arbitrary Tailwind projects, according to the README and package metadata. Applications outside Nuxt should look to Tailwind CSS's own integration paths instead of expecting @nuxtjs/tailwindcss to act as a general build tool.

The available documentation is also narrow about configuration. The README lists extensibility through hooks but does not show how to register a hook, how to inspect generated CSS, or how to diagnose a failed build. It does not document supported content paths, custom PostCSS configuration, CSS file discovery, or framework-specific edge cases. Those omissions do not prove that the module lacks such features. They mean those behaviors cannot be confirmed from the repository information available here.

The v7 beta status adds another operational consideration. A beta release can change its dependency behavior or configuration surface, while the README separately points to v6 for stable Tailwind CSS 3 use. Teams should not treat the two branches as interchangeable when scheduling a production upgrade.

The package scripts show that the project has build, test, type-check, and playground commands, but the README does not explain compatibility requirements for development tooling beyond the documented pnpm workflow. A failure should therefore be investigated against the selected branch's own package metadata and documentation rather than inferred from the stable branch's instructions.

## Nuxt Module Integration Versus Direct Tailwind Setup

A real alternative is configuring Tailwind CSS directly in a Nuxt project rather than adding @nuxtjs/tailwindcss. The direct approach requires the application to arrange its own Tailwind and Nuxt build integration. It can be appropriate when an application already has a deliberate CSS pipeline, needs exact control over Tailwind's PostCSS or Vite integration, or maintains a standard configuration shared across frameworks.

The module approach differs by placing integration behind Nuxt configuration and module hooks. That gives a Nuxt developer a smaller initial setup and a standard extension point for other Nuxt modules. It also couples adoption to this package's supported Tailwind and Nuxt versions. The direct approach has a larger initial configuration responsibility, but it does not require accepting the module's release line and compatibility choices.

The choice is therefore about ownership and version constraints, not simply about whether Tailwind classes can be written. Choose the module when Nuxt-managed setup and module extensibility are priorities. Choose direct configuration when existing build conventions or an independently managed Tailwind version take precedence.

The repository's license is MIT. That is the project's stated licensing information, but it does not replace review of the license text or assessment of compatibility with the application's other dependencies. The module itself does not remove the need to check the Tailwind CSS license and any tooling licenses used by the project.

## Conclusion

Adopt the Nuxt Tailwind CSS module when a Nuxt application should receive Tailwind integration through Nuxt configuration and module hooks. Do not choose it if the application must remain on Tailwind CSS 3 without using the v6 branch. Verify the selected branch, Nuxt compatibility, Tailwind version, and application-specific build configuration before adoption.

## FAQ

### How do I install Nuxt Tailwind CSS?

Run `npx nuxi@latest module add tailwindcss`, or install `@nuxtjs/tailwindcss` with pnpm, yarn, or npm and add `'@nuxtjs/tailwindcss'` to the `modules` array in `nuxt.config.{ts,js}`.

### Does Nuxt Tailwind CSS support Tailwind CSS 4?

Yes. The README says the v7 branch is for Tailwind CSS 4 compatibility, and the package metadata lists Tailwind CSS 4 dependencies. The package version shown in the repository is `7.0.0-beta.1`.

### Which Nuxt Tailwind CSS version should I use with Tailwind CSS 3?

The README directs users to the v6 branch for the stable release that uses Tailwind CSS 3. It identifies v7 as the Tailwind CSS 4 branch.

## Sources

- [License: MIT](https://github.com/nuxt-modules/tailwindcss/blob/main/LICENSE)
- [nuxt-modules/tailwindcss on GitHub](https://github.com/nuxt-modules/tailwindcss)
- [Project website](https://tailwindcss.nuxtjs.org)
- [README](https://github.com/nuxt-modules/tailwindcss/blob/main/README.md)
- [Releases](https://github.com/nuxt-modules/tailwindcss/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/nuxt-modules-tailwindcss