# Tailwind 4

> Tailwind CSS 4.1+ patterns. Use when styling components, responsive design, container queries, masks, shadows, or animations. (project)

- Skill: `majiayu000/tailwind-4-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/tailwind-4-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/tailwind-4-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/tailwind-4-2

---


# Tailwind 4.1+

## Setup

```css
@import "tailwindcss";
```

## Required Reading

**Before writing any `@theme` or `@utility`** → READ `utilities.md` and `examples/*.css`

## Avoid → Use

- `tailwind.config.js` → `@theme` in CSS
- `@apply` → `@utility` or raw CSS
- `dark:bg-*` per element → semantic tokens (see `patterns.md`)
- `group` class → `in-*` variant (see `variants.md`)

## Patterns

- **Dark mode**: `:root`/`.dark` + `@theme inline` → `patterns.md`
- **Variants**: `in-*`, `has-*`, `nth-*`, negation → `variants.md`
- **Container queries**: `@container`, `@sm:`, `@md:` → `variants.md`
- **Entry animation**: `starting:` variant → `patterns.md`
- **Masks**: `mask-b-from-*`, `mask-radial-*` → `patterns.md`