https://github.com/nuxt-modules/tailwindcss

Tailwind CSS module for Nuxt
https://github.com/nuxt-modules/tailwindcss

nuxt nuxt-module nuxtjs tailwindcss

Last synced: 3 days ago
JSON representation

Tailwind CSS module for Nuxt

• Host: GitHub
• URL: https://github.com/nuxt-modules/tailwindcss
• Owner: nuxt-modules
• License: mit
• Created: 2019-04-04T09:35:22.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2025-02-18T13:45:08.000Z (3 days ago)
• Last Synced: 2025-02-18T14:37:08.390Z (3 days ago)
• Topics: nuxt, nuxt-module, nuxtjs, tailwindcss
• Language: TypeScript
• Homepage: https://tailwindcss.nuxtjs.org
• Size: 8.3 MB
• Stars: 1,730
• Watchers: 11
• Forks: 184
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

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