use-tailwind-v4
Tailwind CSS v4 syntax and v3→v4 migration reference. Use when the user mentions 'Tailwind v4', 'upgrade Tailwind', @theme, @utility, or @import 'tailwindcss', or is working in a project whose config indicates v4.
来源信息
- 仓库
- nweii/agent-stuff
- 最近来源活动
- 2026年5月8日 21:59
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 10
- 分支
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
文件资源管理器
2 个文件正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- use-tailwind-v4
- description
- Tailwind CSS v4 syntax and v3→v4 migration reference. Use when the user mentions 'Tailwind v4', 'upgrade Tailwind', @theme, @utility, or @import 'tailwindcss', or is working in a project whose config indicates v4.
# Tailwind CSS v4
## v4 Syntax At a Glance
### Imports and Setup
```css
/* v4 import (replaces @tailwind directives) */
@import "tailwindcss";
/* Custom utilities (replaces @layer utilities) */
@utility tab-4 {
tab-size: 4;
}
/* Loading JS config (if still needed) */
@config "../../tailwind.config.js";
```
### CSS Variables for Theme
v4 exposes all theme values as CSS variables. Prefer these over `theme()`:
```css
background-color: var(--color-red-500);
font-family: var(--font-sans);
```
## Quick Reference: v3 → v4 Changes
### Renamed Utilities
| v3 | v4 | Notes |
|----|-----|-------|
| `shadow-sm` | `shadow-xs` | Scale shifted |
| `shadow` | `shadow-sm` | Scale shifted |
| `drop-shadow-sm` | `drop-shadow-xs` | Scale shifted |
| `drop-shadow` | `drop-shadow-sm` | Scale shifted |
| `blur-sm` | `blur-xs` | Scale shifted |
| `blur` | `blur-sm` | Scale shifted |
| `backdrop-blur-sm` | `backdrop-blur-xs` | Scale shifted |
| `backdrop-blur` | `backdrop-blur-sm` | Scale shifted |
| `rounded-sm` | `rounded-xs` | Scale shifted |
| `rounded` | `rounded-sm` | Scale shifted |
| `outline-none` | `outline-hidden` | `outline-none` now sets `outline-style: none` |
| `ring` | `ring-3` | Default changed from 3px to 1px |
### Deprecated Utilities (Use Opacity Modifiers)
```html
<!-- v3: opacity utilities -->
<div class="bg-black bg-opacity-50">
<!-- v4: opacity modifiers -->
<div class="bg-black/50">
```
Also: `flex-shrink-*` → `shrink-*`, `flex-grow-*` → `grow-*`, `overflow-ellipsis` → `text-ellipsis`
### Default Changes
| What | v3 Default | v4 Default |
|------|------------|------------|
| Border color | `gray-200` | `currentColor` |
| Ring width | `3px` | `1px` |
| Ring color | `blue-500` | `currentColor` |
| Button cursor | `pointer` | `default` |
### Variant Stacking Order
Changed from right-to-left to left-to-right:
```html
<!-- v3 -->
<ul class="first:*:pt-0">
<!-- v4 -->
<ul class="*:first:pt-0">
```
### Variable Syntax in Arbitrary Values
```html
<!-- v3: square brackets -->
<div class="bg-[--brand-color]">
<!-- v4: parentheses -->
<div class="bg-(--brand-color)">
```
### Prefix Syntax
```html
<!-- v4 prefixes are at the start, like variants -->
<div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600">
```
## Upgrading Projects
For project migrations, run the automated upgrade tool:
```bash
npx @tailwindcss/upgrade
```
Requires Node.js 20+. Run in a new branch and review changes.
For complete migration details (PostCSS/Vite/CLI config, custom utilities, framework-specific issues), see [references/upgrade-guide.md](references/upgrade-guide.md).
在 GitHub 查看