tailwindcss-core

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tailwind CSS Core v4.1

Overview

概述

Tailwind CSS v4.1 introduces a CSS-first approach that eliminates the need for a traditional

tailwind.config.js

file. All configuration is now done directly in your CSS files via specialized directives.

Tailwind CSS v4.1引入了CSS优先的方式，不再需要传统的

tailwind.config.js

文件。现在所有配置都可以通过专用指令直接在CSS文件中完成。

Key Concepts

核心概念

1. @import "tailwindcss"

Entry point to load Tailwind CSS. Place at the beginning of your main CSS file.

css

@import "tailwindcss";

This directive automatically loads:

Base utilities
Responsive variants
Layers (theme, base, components, utilities)

加载Tailwind CSS的入口点。放置在主CSS文件的开头。

css

@import "tailwindcss";

该指令会自动加载：

基础工具类
响应式变体
层级（theme、base、components、utilities）

2. @theme

Directive to define or customize theme values via CSS custom properties.

css

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

Variables are accessible in generated utilities:

```
--color-*
```
→ classes
```
bg-primary
```
,
```
text-primary
```
, etc.
```
--spacing-*
```
→ classes
```
p-custom
```
,
```
m-custom
```
, etc.
```
--radius-*
```
→ classes
```
rounded-lg
```
, etc.

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

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

Directive to include additional source files with glob patterns.

css

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

Tailwind will scan these files to generate utilities used in your project.

使用通配符模式引入额外源文件的指令。

css

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

Tailwind会扫描这些文件，为项目中用到的工具类生成对应样式。

4. @utility and @variant

4. @utility 和 @variant

Directives to create custom utilities and variants.

css

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

@variant group-hover {
  .group:hover &
}

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

css

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

@variant group-hover {
  .group:hover &
}

5. @apply

Directive to apply Tailwind classes in your custom CSS rules.

css

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

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

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

css

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

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

6. @config

Directive to load external configuration if needed.

css

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

(Optional in v4.1, mainly used for backward compatibility)

用于加载外部配置的指令（如有需要）。

css

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

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

Dark Mode

深色模式

Dark mode configuration in Tailwind v4.1:

css

@import "tailwindcss";

/* Use system preference */
@variant dark (&:is(.dark *));

Or via manual class:

css

@variant dark (&.dark);

Tailwind v4.1中的深色模式配置：

css

@import "tailwindcss";

/* 使用系统偏好设置 */
@variant dark (&:is(.dark *));

或通过手动类控制：

css

@variant dark (&.dark);

Responsive Breakpoints

响应式断点

Breakpoints are defined via

@theme

css

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

Responsive variants are used with utilities:

html

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

断点可通过

@theme

定义：

css

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

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

html

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

Layer Hierarchy

层级结构

css

@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); }
}

css

@layer theme, base, components, utilities;

@import "tailwindcss";

/* 你的自定义内容 */
@layer components {
  .btn { @apply px-4 py-2 rounded; }
}

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

Plugin Integration

插件集成

Load Tailwind plugins:

css

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

加载Tailwind插件：

css

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

Specificity Order

优先级顺序

In CSS-first, import and declaration order determines specificity:

```
@import "tailwindcss"
```
- Base utilities
```
@theme { ... }
```
- Theme variables
```
@layer components { ... }
```
- Custom components
```
@layer utilities { ... }
```
- Custom utilities

在CSS优先模式下，导入和声明的顺序决定了样式优先级：

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

CSS-first Mode Benefits

CSS优先模式的优势

No complex JavaScript config file
Type-safe via CSS variables
Declarative and readable configuration
Better integration with CSS preprocessors
Simplified maintenance for large projects

无需复杂的JavaScript配置文件
通过CSS变量实现类型安全
声明式且可读性强的配置
与CSS预处理器更好地集成
简化大型项目的维护

Detailed References

详细参考

See specific files for:

```
theme.md
```
- Complete theme variable configuration
```
directives.md
```
- Syntax and examples of all directives
```
config.md
```
- Advanced configuration and use cases

如需更多细节，请查看以下文件：

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