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.

Nuxt Tailwind

Enable Tailwind CSS for Nuxt β‘οΈ
π Β Documentation | βΆοΈ Play online | β¨ Β Release Notes
Features
Quick Setup
Add @nuxtjs/tailwindcss
using the Nuxt CLI to your project
npx nuxi@latest module add tailwindcss
..or install using your dependency manager
pnpm add --save-dev @nuxtjs/tailwindcss
yarn add --dev @nuxtjs/tailwindcss
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 π