// Confusing
```
### Dark Mode Implementation
**v3 — `tailwind.config.js`:**
```js
module.exports = { darkMode: 'class' }
```
**v4 — CSS only, no config file:**
```css
@import "tailwindcss";
/* dark mode is class-based by default in v4 — no config needed */
```
**Component — identical in both versions:**
```tsx
function toggleDarkMode() {
document.documentElement.classList.toggle('dark')
}
```
### Conditional Classes with clsx/cn
```tsx
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
// cn utility - merges Tailwind classes intelligently
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
// Usage
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'danger'
size?: 'sm' | 'md' | 'lg'
className?: string
children: React.ReactNode
}
function Button({ variant = 'primary', size = 'md', className, children }: ButtonProps) {
return (
)
}
```
### Theme Configuration — v3 vs v4
**v3 — `tailwind.config.js`:**
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./resources/**/*.{blade.php,js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
colors: { primary: { 500: '#0ea5e9', 600: '#0284c7' } },
fontFamily: { sans: ['Inter', 'sans-serif'] },
spacing: { '18': '4.5rem' },
},
},
plugins: [require('@tailwindcss/forms')],
}
```
**v4 — `app.css` only, no JS config:**
```css
@import "tailwindcss";
@theme {
--color-primary-500: #0ea5e9;
--color-primary-600: #0284c7;
--font-sans: Inter, sans-serif;
--spacing-18: 4.5rem;
--breakpoint-3xl: 1920px;
}
```
> See `v4-theme-configuration` and `v4-migration` rules for full details.
### Responsive Grid Layout
```tsx
// Product grid - responsive columns
{products.map(product => (
))}
// Dashboard layout - sidebar + main
```
### Form Styling
```tsx
```
### Animations with Reduced Motion
```tsx
// Respect user's motion preferences
Card content
// Custom animation
Content
```
```js
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
'fade-in': {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
},
animation: {
'fade-in': 'fade-in 0.3s ease-out',
},
},
},
}
```
## How to Use
Always run Step 1 (version detection) first, then read the relevant rule files:
**v3 projects:**
```
rules/config-extend-theme.md
rules/dark-setup.md
rules/comp-clsx-cn.md
rules/resp-mobile-first.md
```
**v4 projects:**
```
rules/v4-installation.md
rules/v4-theme-configuration.md
rules/v4-custom-utilities.md
```
**Migrating v3 → v4:**
```
rules/v4-migration.md
```
## References
- [Tailwind CSS Documentation](https://tailwindcss.com/docs) - Official documentation
- [Responsive Design Guide](https://tailwindcss.com/docs/responsive-design) - Mobile-first patterns
- [Dark Mode Guide](https://tailwindcss.com/docs/dark-mode) - Theme implementation
- [Configuration Guide](https://tailwindcss.com/docs/configuration) - Customization
- [Tailwind UI](https://tailwindui.com) - Official component library
- [Headless UI](https://headlessui.com) - Accessible components
- [Heroicons](https://heroicons.com) - Icon library
## Ecosystem Tools
- **Tailwind CSS IntelliSense** - VS Code autocomplete and linting
- **Prettier Plugin** - Automatic class sorting
- **tailwind-merge** - Conflict-free class merging
- **clsx** - Conditional class utility
- **CVA** - Component variant system
## License
MIT License - See repository for full license text.
This skill is part of the Agent Skills collection, providing AI-powered development assistance with industry best practices.
[View on SkillFed](https://skillfed.io/AsyrafHussin/agent-skills/tailwind-best-practices) · [View on GitHub](https://github.com/AsyrafHussin/agent-skills)