---
name: tailwindcss-development
description: Use this skill when working on UI, styling, or frontend. Triggers on: writing Blade templates, styling components, responsive design, dark mode, adding CSS classes, Tailwind utilities, Vite builds, or any frontend/UI work in this project.
version: 1.0.0
---

# Tailwind CSS v4 Development

This project uses **Tailwind CSS v4** via the `@tailwindcss/vite` plugin.

## Stack

- Tailwind CSS v4 (no `tailwind.config.js` — config is in CSS)
- Vite with `laravel-vite-plugin`
- Prettier with `prettier-plugin-tailwindcss` for class sorting

## Key Tailwind v4 Differences

- Configuration is done in CSS using `@theme` directive, not in a JS config file
- Use `@import "tailwindcss"` in your CSS entry point
- Custom colors/tokens defined with CSS variables under `@theme`
- `@apply` still works for extracting component classes

## Blade Integration

```html
<!-- Prefer utility classes directly on elements -->
<div class="flex items-center gap-4 rounded-lg bg-white p-6 shadow-sm">
    <h2 class="text-lg font-semibold text-gray-900">Title</h2>
</div>

<!-- Dark mode -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
```

## After Frontend Changes

If a change isn't reflected in the browser, remind the user to run:
```bash
npm run build
# or for development
composer run dev
```

## Responsive Design

Use mobile-first breakpoints: `sm:`, `md:`, `lg:`, `xl:`, `2xl:`

```html
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
```