### Install @nuxtjs/tailwindcss

Source: https://context7.com/nuxt-modules/tailwindcss/llms.txt

Install the module using the Nuxt CLI or a package manager.

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

```bash
pnpm add --save-dev @nuxtjs/tailwindcss
```

--------------------------------

### Install Tailwind CSS Module with Package Managers

Source: https://github.com/nuxt-modules/tailwindcss/blob/main/README.md

Install the @nuxtjs/tailwindcss module using pnpm, yarn, or npm. After installation, add it to the modules section of your nuxt.config file.

```bash
# Using pnpm
pnpm add --save-dev @nuxtjs/tailwindcss

# Using yarn
yarn add --dev @nuxtjs/tailwindcss

# Using npm
npm install --save-dev @nuxtjs/tailwindcss
```

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

--------------------------------

### Using `tw` Autocomplete Utility

Source: https://context7.com/nuxt-modules/tailwindcss/llms.txt

The auto-imported `tw` helper enables IDE Tailwind CSS IntelliSense within JavaScript/TypeScript strings and template literals without runtime overhead. It functions as a transparent pass-through.

```vue
<template>
  <div :class="containerClass">
    <span class="text-blue-500 font-medium">Hello Tailwind!</span>
  </div>
</template>

<script setup lang="ts">
import { tw } from '#imports'

// Tagged template literal — IDE IntelliSense works inside the backtick string
const containerClass = tw`max-w-screen-lg p-4 mx-auto space-y-4`

// Also works as a plain function call with a string argument
const headingClass = tw('text-3xl font-extrabold tracking-tight text-gray-900')
</script>
```

--------------------------------

### Nuxt Base App with Theme Layer Configuration

Source: https://context7.com/nuxt-modules/tailwindcss/llms.txt

Configure a base Nuxt application to extend a theme layer, allowing the theme layer to also register the @nuxtjs/tailwindcss module.

```typescript
// playground/nuxt.config.ts — base app using a theme layer
export default defineNuxtConfig({
  extends: [
    './layers/theme', // this layer can also register @nuxtjs/tailwindcss
  ],
  modules: ['@nuxtjs/tailwindcss'],
  css: ['~/assets/css/main.css'],
  future: { compatibilityVersion: 4 },
})
```

--------------------------------

### Auto-detected CSS Entry Point with Tailwind Import

Source: https://context7.com/nuxt-modules/tailwindcss/llms.txt

If your project lacks a CSS file importing 'tailwindcss', a 'tailwind.css' template is auto-generated. If you provide your own CSS file with '@import "tailwindcss";', it's detected automatically.

```css
/* assets/css/main.css — detected automatically if it contains this import */
@import 'tailwindcss';
```

--------------------------------

### Generated `sources.css` Template Content

Source: https://context7.com/nuxt-modules/tailwindcss/llms.txt

The generated `.nuxt/tailwindcss/sources.css` template includes `@source` declarations for scanned directories and `@source inline()` for provided class strings.

```css
@source "/path/to/nuxt/app";
@source "/path/to/external/components";
@source inline(bg-brand-500 text-white font-bold);
```

--------------------------------

### Extending Tailwind Sources with `tailwindcss:sources:extend` Hook

Source: https://context7.com/nuxt-modules/tailwindcss/llms.txt

Use the `tailwindcss:sources:extend` hook in `nuxt.config.ts` or a custom module to push additional Tailwind source paths (directories or inline class strings) before the `sources.css` template is generated.

```typescript
// nuxt.config.ts or a custom Nuxt module
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  hooks: {
    'tailwindcss:sources:extend'(sources) {
      // Add an extra directory to scan for Tailwind classes
      sources.push({ type: 'path', source: '/path/to/external/components' })

      // Add an inline string of classes (e.g., from a dynamic config value)
      sources.push({ type: 'inline', source: 'bg-brand-500 text-white font-bold' })
    },
  },
})
```

--------------------------------

### Theme Layer Configuration

Source: https://context7.com/nuxt-modules/tailwindcss/llms.txt

Define a child Nuxt layer that automatically contributes its srcDir as a Tailwind CSS @source path. This layer also registers the @nuxtjs/tailwindcss module.

```typescript
// layers/theme/nuxt.config.ts — child layer; its srcDir is auto-added as @source
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  css: [],
  future: { compatibilityVersion: 4 },
})
```

--------------------------------

### Add Tailwind CSS Module using Nuxt CLI

Source: https://github.com/nuxt-modules/tailwindcss/blob/main/README.md

Use this command to add the @nuxtjs/tailwindcss module to your Nuxt project via the Nuxt CLI.

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

--------------------------------

### Register @nuxtjs/tailwindcss in nuxt.config.ts

Source: https://context7.com/nuxt-modules/tailwindcss/llms.txt

Add the module to your Nuxt project's configuration file.

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

--------------------------------

### Vite Builder Integration with Tailwind CSS

Source: https://context7.com/nuxt-modules/tailwindcss/llms.txt

Configuration for a Nuxt app using the default Vite builder. The @nuxtjs/tailwindcss module automatically adds @tailwindcss/vite as a Vite plugin.

```typescript
// Vite builder (default) — @tailwindcss/vite is added automatically
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  // No additional vite.plugins configuration needed
})
```

--------------------------------

### Reference CSS File in nuxt.config.ts

Source: https://context7.com/nuxt-modules/tailwindcss/llms.txt

Reference your custom CSS file in the 'nuxt.config.ts' file's 'css' option. The module will detect the '@import "tailwindcss";' within it.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  css: ['~/assets/css/main.css'],
})
```

--------------------------------

### Webpack/Nitro Builder Integration with Tailwind CSS

Source: https://context7.com/nuxt-modules/tailwindcss/llms.txt

Configuration for a Nuxt app using a webpack-based builder. The @nuxtjs/tailwindcss module automatically injects @tailwindcss/postcss into nuxt.options.postcss.plugins.

```typescript
// Webpack / Nitro non-Vite builder — @tailwindcss/postcss is added automatically
export default defineNuxtConfig({
  builder: '@nuxt/webpack-builder',
  modules: ['@nuxtjs/tailwindcss'],
  // postcss.plugins['@tailwindcss/postcss'] is configured automatically
})
```

--------------------------------

### HTML and Body Class Attribute Configuration

Source: https://context7.com/nuxt-modules/tailwindcss/llms.txt

Configure Tailwind CSS to scan classes directly applied to the <html> and <body> elements by defining them in nuxt.config.ts. This ensures utilities used on these elements are included in the generated CSS.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  app: {
    head: {
      htmlAttrs: {
        class: 'dark scroll-smooth',
      },
      bodyAttrs: {
        class: 'bg-white text-gray-900 antialiased',
      },
    },
  },
})
// Tailwind will scan "dark scroll-smooth" and "bg-white text-gray-900 antialiased"
// as inline sources and include those utilities in the output CSS.
```

--------------------------------

### Using `#tailwindcss` CSS Alias in Vue Components

Source: https://context7.com/nuxt-modules/tailwindcss/llms.txt

Reference Tailwind utilities within Vue component `<style>` blocks using the `#tailwindcss` alias with `@reference` or `@apply`. This avoids a second import chain.

```vue
<style>
/* Use @reference to enable @apply without emitting duplicate CSS */
@reference '#tailwindcss';

h2 {
  .description {
    @apply text-indigo-600;
    &:hover {
      @apply text-teal-600;
    }
  }
}
</style>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.