mcpField
T
tailwindcss-core

tailwindcss-core

github.com/fusengine设计与 UI3445 次安装2 周前更新
代码仓库

关于 tailwindcss-core

tailwindcss-core 是介绍如何通过 CSS 指令配置 Tailwind CSS v4.3 的参考技能，面向采用 CSS 优先方式的开发者，涵盖主题变量、源码扫描、自定义工具类与变体、暗色模式、断点、层和插件加载。

主要功能

  1. 01使用 CSS 指令进行优先配置
  2. 02主题变量与响应式断点
  3. 03扫描额外的源文件
  4. 04自定义工具类和变体
  5. 05暗色模式设置与 CSS 层
  6. 06插件加载和旧版配置支持

适用场景

  1. 01将 JavaScript 配置迁移到 CSS
  2. 02定义项目主题变量和断点
  3. 03添加自定义工具类与变体
  4. 04加载插件并扫描其源文件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/fusengine/claude-plugins --skill tailwindcss-core

安装后在 Claude Code 中输入/tailwindcss-core确认已加载。

详细介绍

介绍 Tailwind CSS v4.3 的 CSS 优先配置指令：`@import "tailwindcss"`、用于将主题令牌定义为 CSS 自定义属性的 `@theme`、用于扫描其他源文件的 `@source`、用于自定义工具类和变体的 `@utility`/`@variant`、用于在自定义 CSS 中组合工具类的 `@apply`，以及用于加载旧版 JS 配置的 `@config`。

还涵盖暗色模式变体设置、通过 @theme 设置响应式断点、CSS 层级（theme, base, components, utilities），以及插件集成——完整的 CSS 优先方案，可替代 tailwind.config.js。

Tailwind CSS Core v4.3

概述

Tailwind CSS v4（自 v4.0 起；当前稳定版为 v4.3）采用 CSS 优先 的方式，无需传统的 tailwind.config.js 文件。现在，所有配置都通过专用指令直接在 CSS 文件中完成。

核心概念

1. @import "tailwindcss"

用于加载 Tailwind CSS 的入口。在主 CSS 文件开头添加。

@import "tailwindcss";

此指令会自动加载：

  • 基础工具类
  • 响应式变体
  • 各层（theme、base、components、utilities）
2. @theme

用于通过 CSS 自定义属性定义或自定义主题值的指令。

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #ef4444;
  --spacing-custom: 2.5rem;
  --radius-lg: 1rem;
}

这些变量可用于生成的工具类：

  • --color-* → 类 bg-primary、text-primary 等
  • --spacing-* → 类 p-custom、m-custom 等
  • --radius-* → 类 rounded-lg 等
3. @source

用于通过 glob 模式添加其他源文件的指令。

@source "./routes/**/*.{ts,tsx}";
@source "./components/**/*.{tsx,jsx}";
@source "../packages/ui/src/**/*.{ts,tsx}";

Tailwind 将扫描这些文件，生成项目中使用的工具类。

4. @utility 和 @variant

用于创建自定义工具类和变体的指令。

@utility truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Define a new variant with @custom-variant */
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

/* Apply an existing variant inside CSS with @variant
   (stacked `hover:focus` and compound `hover, focus` forms since v4.3) */
.card {
  @variant hover:focus {
    background: var(--color-sky-600);
  }
}
5. @apply

用于在自定义 CSS 规则中应用 Tailwind 类的指令。

.btn {
  @apply px-4 py-2 rounded-lg font-semibold;
}

.btn-primary {
  @apply bg-blue-500 text-white hover:bg-blue-600;
}
6. @config

用于在需要时加载外部配置的指令。

@config "./tailwind.config.js";

（在 v4 中可选，主要用于向后兼容）

暗色模式

Tailwind v4.3 中的暗色模式配置：

@import "tailwindcss";

/* Default: `dark:` follows prefers-color-scheme — no config needed */

也可以通过手动类实现（使用 @custom-variant 覆盖 dark 变体）：

@custom-variant dark (&:where(.dark, .dark *));

响应式断点

通过 @theme 定义断点：

@theme {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

响应式变体与工具类搭配使用：

<div class="text-sm md:text-base lg:text-lg"></div>

层级结构

@layer theme, base, components, utilities;

@import "tailwindcss";

/* Your customizations */
@layer components {
  .btn { @apply px-4 py-2 rounded; }
}

@layer utilities {
  .text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
}

插件集成

加载 Tailwind 插件：

@import "tailwindcss";
@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

特异性顺序

在 CSS 优先模式中，导入和声明顺序决定特异性：

  1. @import "tailwindcss" - 基础工具类
  2. @theme { ... } - 主题变量
  3. @layer components { ... } - 自定义组件
  4. @layer utilities { ... } - 自定义工具类

CSS 优先模式的优势

  • 无需复杂的 JavaScript 配置文件
  • 通过 CSS 变量实现类型安全
  • 配置声明式且易读
  • 可替代 CSS 预处理器（Tailwind v4 并非为与 Sass/Less/Stylus 搭配使用而设计）
  • 简化大型项目的维护

详细参考

请参阅以下特定文件：

  • theme.md - 完整的主题变量配置
  • directives.md - 所有指令的语法和示例
  • config.md - 高级配置和用例

评论

支持 Markdown