tailwind-v4 by existential-birds/beagle
npx skills add https://github.com/existential-birds/beagle --skill tailwind-v4Vite 插件设置:
// vite.config.ts
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [tailwindcss()],
});
CSS 入口文件:
/* src/index.css */
@import 'tailwindcss';
@theme 内联指令:
@theme inline {
--color-primary: oklch(60% 0.24 262);
--color-surface: oklch(98% 0.002 247);
}
| 功能 | v3 | v4 |
|---|---|---|
| 配置方式 | tailwind.config.js | CSS 中的 @theme |
| 构建工具 | PostCSS 插件 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| @tailwindcss/vite |
| 颜色格式 | rgb() / hsl() | oklch() (默认) |
| 主题扩展 | JS 中的 extend: {} | CSS 变量 |
| 深色模式 | darkMode 配置选项 | CSS 变体 |
生成可在其他地方引用的 CSS 变量:
@theme {
--color-brand: oklch(60% 0.24 262);
}
/* 生成::root { --color-brand: oklch(...); } */
/* 用法:text-brand → color: var(--color-brand) */
注意:你也可以显式使用 @theme default 来标记可以被非默认 @theme 声明覆盖的主题值。
直接内联值而不使用 CSS 变量(性能更好):
@theme inline {
--color-brand: oklch(60% 0.24 262);
}
/* 用法:text-brand → color: oklch(60% 0.24 262) */
将值内联作为回退值,不生成 CSS 变量:
@theme reference {
--color-internal: oklch(50% 0.1 180);
}
/* 不生成 :root 变量,但工具类使用回退值 */
/* 用法:bg-internal → background-color: var(--color-internal, oklch(50% 0.1 180)) */
OKLCH 提供感知均匀的颜色,在不同色调间具有更好的一致性:
oklch(L% C H)
示例:
--color-sky-500: oklch(68.5% 0.169 237.323); /* 亮蓝色 */
--color-red-600: oklch(57.7% 0.245 27.325); /* 鲜艳红色 */
--color-zinc-900: oklch(21% 0.006 285.885); /* 近黑色灰色 */
Tailwind v4 使用双破折号 CSS 变量命名约定:
@theme {
/* 颜色:--color-{名称}-{色阶} */
--color-primary-500: oklch(60% 0.24 262);
/* 间距:--spacing 乘数 */
--spacing: 0.25rem; /* 间距比例的基础单位 */
/* 字体:--font-{字体系列} */
--font-display: 'Inter Variable', system-ui, sans-serif;
/* 断点:--breakpoint-{尺寸} */
--breakpoint-lg: 64rem;
/* 自定义动画:--animate-{名称} */
--animate-fade-in: fade-in 0.3s ease-out;
}
Tailwind v4 移除了配置文件:
无需 tailwind.config.js - 改用 CSS 中的 @theme
无需 postcss.config.js - 使用 @tailwindcss/vite 插件
TypeScript 支持 - 添加 @types/node 用于路径解析
{ "devDependencies": { "@tailwindcss/vite": "^4.0.0", "@types/node": "^22.0.0", "tailwindcss": "^4.0.0", "vite": "^6.0.0" } }
使用 @theme inline:
使用 @theme (默认):
使用 @theme reference:
映射到设计令牌的语义变量:
@theme {
/* 设计令牌 (OKLCH 颜色) */
--color-blue-600: oklch(54.6% 0.245 262.881);
--color-slate-800: oklch(27.9% 0.041 260.031);
/* 语义映射 */
--color-primary: var(--color-blue-600);
--color-surface: var(--color-slate-800);
}
/* 用法:bg-primary, bg-surface */
@theme {
--font-display: 'Inter Variable', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--font-display--font-variation-settings: 'wght' 400;
--font-display--font-feature-settings: 'cv02', 'cv03', 'cv04';
}
/* 用法:font-display, font-mono */
@theme inline {
--animate-beacon: beacon 2s ease-in-out infinite;
@keyframes beacon {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(1.05);
}
}
}
/* 用法:animate-beacon */
每周安装量
443
代码仓库
GitHub 星标数
40
首次出现
2026年1月20日
安全审计
安装于
opencode324
gemini-cli311
codex301
github-copilot286
claude-code271
cursor251
Vite Plugin Setup :
// vite.config.ts
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [tailwindcss()],
});
CSS Entry Point :
/* src/index.css */
@import 'tailwindcss';
@theme Inline Directive :
@theme inline {
--color-primary: oklch(60% 0.24 262);
--color-surface: oklch(98% 0.002 247);
}
| Feature | v3 | v4 |
|---|---|---|
| Configuration | tailwind.config.js | @theme in CSS |
| Build Tool | PostCSS plugin | @tailwindcss/vite |
| Colors | rgb() / hsl() | oklch() (default) |
| Theme Extension | extend: {} in JS | CSS variables |
| Dark Mode | darkMode config option | CSS variants |
Generates CSS variables that can be referenced elsewhere:
@theme {
--color-brand: oklch(60% 0.24 262);
}
/* Generates: :root { --color-brand: oklch(...); } */
/* Usage: text-brand → color: var(--color-brand) */
Note : You can also use @theme default explicitly to mark theme values that can be overridden by non-default @theme declarations.
Inlines values directly without CSS variables (better performance):
@theme inline {
--color-brand: oklch(60% 0.24 262);
}
/* Usage: text-brand → color: oklch(60% 0.24 262) */
Inlines values as fallbacks without emitting CSS variables:
@theme reference {
--color-internal: oklch(50% 0.1 180);
}
/* No :root variable, but utilities use fallback */
/* Usage: bg-internal → background-color: var(--color-internal, oklch(50% 0.1 180)) */
OKLCH provides perceptually uniform colors with better consistency across hues:
oklch(L% C H)
Examples :
--color-sky-500: oklch(68.5% 0.169 237.323); /* Bright blue */
--color-red-600: oklch(57.7% 0.245 27.325); /* Vibrant red */
--color-zinc-900: oklch(21% 0.006 285.885); /* Near-black gray */
Tailwind v4 uses double-dash CSS variable naming conventions:
@theme {
/* Colors: --color-{name}-{shade} */
--color-primary-500: oklch(60% 0.24 262);
/* Spacing: --spacing multiplier */
--spacing: 0.25rem; /* Base unit for spacing scale */
/* Fonts: --font-{family} */
--font-display: 'Inter Variable', system-ui, sans-serif;
/* Breakpoints: --breakpoint-{size} */
--breakpoint-lg: 64rem;
/* Custom animations: --animate-{name} */
--animate-fade-in: fade-in 0.3s ease-out;
}
Tailwind v4 eliminates configuration files:
Notailwind.config.js - Use @theme in CSS instead
Nopostcss.config.js - Use @tailwindcss/vite plugin
TypeScript support - Add @types/node for path resolution
{ "devDependencies": { "@tailwindcss/vite": "^4.0.0", "@types/node": "^22.0.0", "tailwindcss": "^4.0.0", "vite": "^6.0.0" } }
Use@theme inline:
Use@theme (default):
Use@theme reference:
Semantic variables that map to design tokens:
@theme {
/* Design tokens (OKLCH colors) */
--color-blue-600: oklch(54.6% 0.245 262.881);
--color-slate-800: oklch(27.9% 0.041 260.031);
/* Semantic mappings */
--color-primary: var(--color-blue-600);
--color-surface: var(--color-slate-800);
}
/* Usage: bg-primary, bg-surface */
@theme {
--font-display: 'Inter Variable', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--font-display--font-variation-settings: 'wght' 400;
--font-display--font-feature-settings: 'cv02', 'cv03', 'cv04';
}
/* Usage: font-display, font-mono */
@theme inline {
--animate-beacon: beacon 2s ease-in-out infinite;
@keyframes beacon {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(1.05);
}
}
}
/* Usage: animate-beacon */
Weekly Installs
443
Repository
GitHub Stars
40
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode324
gemini-cli311
codex301
github-copilot286
claude-code271
cursor251
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
103,800 周安装
Apple端侧AI开发指南:Core ML、Foundation Models、MLX Swift与llama.cpp选择与优化
424 周安装
SwiftData 教程:iOS 26+ 数据持久化、查询与管理完整指南
424 周安装
加密货币交易机器人 - 自动化交易策略与安全审计指南
424 周安装
Vitest 测试框架最佳实践指南:44条性能优化与规则详解
424 周安装
App Builder 应用构建编排器:AI 智能规划技术栈、项目结构与多代理协调
424 周安装
Trello API 命令行管理工具 - 使用 curl 自动化管理看板、列表和卡片
424 周安装