https://github.com/nuxt-modules/tailwindcss
Tailwind CSS module for Nuxt
https://github.com/nuxt-modules/tailwindcss
nuxt nuxt-module nuxtjs tailwindcss
Last synced: 12 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 7 years ago)
- Default Branch: main
- Last Pushed: 2025-05-10T16:52:08.000Z (8 months ago)
- Last Synced: 2025-05-10T17:39:18.814Z (8 months ago)
- Topics: nuxt, nuxt-module, nuxtjs, tailwindcss
- Language: TypeScript
- Homepage: https://tailwindcss.nuxtjs.org
- Size: 8.42 MB
- Stars: 1,782
- Watchers: 10
- Forks: 189
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](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]
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
- 📦 Extendable by [Nuxt modules](https://nuxt.com/modules) using [hooks](https://tailwindcss.nuxtjs.org/tailwindcss/config#hooks)
## 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:
[](https://codesandbox.io/s/github/nuxt-modules/tailwindcss/tree/main/?fontsize=14&hidenavigation=1&theme=dark)
[](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`
## 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