# Dallay Cvix Tailwind 4
> Tailwind CSS 4 Best Practices
- Skill: `tomevault-io/dallay-cvix-tailwind-4` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/dallay-cvix-tailwind-4`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/dallay-cvix-tailwind-4/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/dallay-cvix-tailwind-4
---
# Tailwind CSS 4 Best Practices
This document outlines best practices for using Tailwind CSS 4 in Astro and Vue projects, focusing
on when to use class/:class, optional helpers, style constants, and dynamic styles.
## Styling Decision Tree
```markdown
Tailwind class exists? → class="..." (Astro/Vue static)
Dynamic value (Vue)? → :style="{ width: x + '%' }"
Dynamic value (Astro)? → style="width: ${x}%" (string)
Conditional styles (Vue) → :class="['base', condition && 'variant']" or :class="{ variant: condition }"
Conditional styles (Astro)→ class="base ${condition ? 'variant' : ''}"
Static only? → class="..." (no helper needed)
Library can't use class? → style props with var() constants
```
## Critical Rules
### Never Use var() in class
```typescript
// ❌ NEVER: var() in class
// ✅ ALWAYS: Use Tailwind semantic classes
```
### Never Use Hex Colors
```typescript
// ❌ NEVER: Hex colors in class
// ✅ ALWAYS: Use Tailwind color classes
```
## Conditional Classes in Vue/Astro
Prefer framework-native patterns:
```vue
```
```astro
---
const isActive = true;
const variant = 'primary';
---
```
Optional helper (only when programmatically composing class strings or merging potential Tailwind
conflicts):
```typescript
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
```
## Using cn() in Vue/Astro
Use `cn()` when you need to merge potentially conflicting Tailwind classes or compose classes
programmatically. Prefer native `:class`/string interpolation for simple conditions.
```vue
```
```astro
---
import { cn } from '@cvix/lib';
const { active = false, size = 'md', class: className = '' } = Astro.props;
---
```
### When NOT to Use cn()
```vue
```
```astro
```
## Style Constants for Charts/Libraries
When libraries don't accept class/:class (e.g., Recharts, Chart.js, ECharts):
```typescript
// ✅ Constants with var() - ONLY for library props
const CHART_COLORS = {
primary: "var(--color-primary)",
secondary: "var(--color-secondary)",
text: "var(--color-text)",
gridLine: "var(--color-border)",
};
// Usage (can't use class)
```
## Dynamic Values
```typescript
// ✅ Vue: style binding for truly dynamic values
// ✅ Astro: style as string
// ✅ CSS custom properties for theming
// Vue
// Astro
```
## Common Patterns
### Flexbox
```typescript
```
### Grid
```typescript
```
### Spacing
```typescript
// Padding
// All sides
// Horizontal, vertical
// Top, bottom
// Margin
// Center horizontally
```
### Typography
```typescript
```
### Borders & Shadows
```typescript
```
### States
```typescript
```
### Responsive
```typescript
```
### Dark Mode
```typescript
```
## Arbitrary Values (Escape Hatch)
```typescript
// ✅ OK for one-off values not in design system
// ❌ Don't use for colors - use theme instead
// NO
```
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/dallay) — claim your Tome and manage your conversions.