# Master Tailwind CSS V4 Architecture

Tailwind CSS V4 changes configuration, utilities, browser support, and performance expectations. This skill gives structured migration, component, and optimization guidance for modern frontend teams.

## Install

```bash
npx skillstore add calel33/tailwind-css-v4-mastery
```

## Metadata

- Status: approved
- Slug: calel33-tailwind-css-v4-mastery
- Version: 1.0.0
- Author version: 1.0.0
- Skillstore revision: r1
- Version status: valid
- Tree hash: bd506d1fa3c1a050755dc0244ac455bcd49e011db75e7de1b57b0982548e6f18
- Author: Calel33
- GitHub username: Calel33
- License: MIT
- Repository: https://github.com/Calel33/my-flash-ui-app--1-/tree/main/skills/tailwindv4
- Ref: 67e6747f5b57a33ea8c62a0043d8f2ef310189ab
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: env\_access, external\_commands, filesystem, network
- Quality score: 70
- Public page: https://skillstore.pages.dev/skills/calel33-tailwind-css-v4-mastery
- Manifest: https://skillstore.pages.dev/api/skills/calel33-tailwind-css-v4-mastery/manifest

## Capabilities

- Explains Tailwind CSS V4 CSS-first configuration and @theme patterns.
- Guides migrations from Tailwind v3 utility names and config files.
- Designs reusable component systems with Tailwind V4 layers and variables.
- Recommends build tool integration for Vite, PostCSS, Webpack, and CLI workflows.
- Diagnoses common V4 issues such as removed opacity utilities and changed defaults.

## Use Cases

- Migrate a Product UI: Plan and execute a Tailwind v3 to v4 migration with utility replacements and validation checks.
- Design a Component System: Create theme variables, component classes, and state conventions for reusable Tailwind V4 interfaces.
- Improve Build Performance: Choose the right Tailwind V4 plugin and reduce unnecessary theme or breakpoint configuration.

## Prompt Templates

### Check My Setup

```
Review my Tailwind CSS V4 setup and tell me if my @import, plugin, and @theme usage are correct.
```

### Plan a Migration

```
Create a Tailwind v3 to v4 migration plan for my project, including utility renames, config changes, and validation steps.
```

### Build a Theme System

```
Design a Tailwind V4 theme system with CSS variables, component classes, dark mode, and brand overrides.
```

### Optimize a Large App

```
Audit my Tailwind V4 build strategy and recommend changes for faster builds, smaller CSS, and better HMR.
```

## Limitations

- It does not replace official Tailwind release notes for newly released features.
- The included shell script can modify project files and should be reviewed before use.
- It focuses on Tailwind V4, not general JavaScript or framework architecture.
- Legacy browser support advice is limited because Tailwind V4 targets modern browsers.

## Best Practices

- Review migration diffs before running automated scripts on production projects.
- Keep @theme blocks focused on values that differ from Tailwind defaults.
- Test visual changes across responsive, dark mode, and interactive component states.

## Anti Patterns

- Do not assume tailwind.config.js controls Tailwind V4 output by default.
- Do not define large theme scales that your application never uses.
- Do not run migration scripts without version control or a separate backup.

## Security Audit

- Audited at: 2026-07-19T04:29:13.148\+00:00
- Summary: All 97 static alerts are false positives tied to documentation formatting, CSS patterns, official URLs, a production literal, or expected Bash syntax. Two semantic risks remain: unpinned package installation and broad in-place project rewrites without confirmation. No prompt injection or exfiltration intent was found.

## Stats

- Views: 197
- Downloads: 21
- Favorites: 0
- Popularity score: 0