# Tailwind CSS in Nuxt **Last Updated:** 2025-11 (Tailwind v4.1.16) **Check:** `@nuxtjs/tailwindcss` in package.json Tailwind CSS is automatically integrated into Nuxt through the `@nuxtjs/tailwindcss` module, providing utility-first CSS framework support. ## When to Use Tailwind **Detection:** Always check `package.json` for `@nuxtjs/tailwindcss` dependency before suggesting Tailwind patterns. **If Tailwind is installed:** - Prefer Tailwind utility classes in component templates - Use utilities for layout, spacing, colors, typography, responsive design - Combine utilities for common patterns (flex, grid, etc.) **If Tailwind is NOT installed:** - Use ` ``` ### Layout Utilities ```vue ``` ### Transitions & Animations ```vue ``` ## Custom Layers ### Adding Custom Utilities ```css /* assets/css/main.css */ @import "tailwindcss"; @layer utilities { .text-gradient { @apply bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } } ``` Usage: ```vue ``` ### Custom Components Layer ```css /* assets/css/main.css */ @import "tailwindcss"; @layer components { .card { @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6; } .card-title { @apply text-xl font-semibold mb-2 text-gray-900 dark:text-white; } .card-body { @apply text-gray-600 dark:text-gray-300; } } ``` Usage: ```vue ``` ## Tailwind Plugins ### Using Official Plugins ```bash pnpm add -D @tailwindcss/forms @tailwindcss/typography @tailwindcss/container-queries ``` ```typescript // tailwind.config.ts import type { Config } from "tailwindcss" export default { plugins: [ require("@tailwindcss/forms"), require("@tailwindcss/typography"), require("@tailwindcss/container-queries"), ], } satisfies Config ``` ### @tailwindcss/typography For rich text content: ```vue ``` ### @tailwindcss/forms Automatically styles form elements: ```vue