Tailwind v4 Theme 生成器

可视化配置 Tailwind CSS v4 主题，包括自定义颜色、断点、字体等，自动生成 CSS @theme 配置代码。

自定义颜色 (Colors)

生成结果

@import "tailwindcss";

@theme {
  /* Colors */
  --color-primary: #3B82F6;
  --color-secondary: #6B7280;
  --color-success: #10B981;
  --color-info: #06B6D4;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* Screens */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Fonts */
  --font-sans: Inter, system-ui, sans-serif;
  --font-serif: Merriweather, serif;
  --font-mono: Fira Code, monospace;
}

使用指南

Tailwind CSS v4 使用 CSS 变量和 @theme 块进行配置。配置完成后，点击下载并将内容保存到你的主 CSS 文件中（例如 main.css），或者复制到 @theme 块中。