Tailwind CSS Functions & Directives API Reference

`Config`

4 methods

tailwind.config.js 对象中的键，用于自定义设计令牌、扫描文件和暗色模式。

lighten($color, $amount)

自定义默认主题。使用 extend 添加或覆盖令牌而不替换默认值；顶层键会替换。

Parameters

Name	Type	Description
$color	color	Base color.
$amount	percentage (0-100%)	Amount to lighten.

Returns

color

Example

sass

$base: #3498db;
.hover {
  background: lighten($base, 10%);
}

darken($color, $amount)

Tailwind 扫描的文件 glob 数组，用于检测在生产构建中保留哪些类。

Parameters

Name	Type	Description
$color	color	Base color.
$amount	percentage (0-100%)	Amount to darken.

Returns

color

Example

sass

$base: #3498db;
.active {
  background: darken($base, 10%);
}

mix($color1, $color2, $weight: 50%)

控制暗色变体的应用方式：media（prefers-color-scheme）、class（父级 .dark 类）、selector 或自定义选择器。

Parameters

Name	Type	Description
$color1	color	First color.
$color2	color	Second color.
$weight	percentage (0-100%)	Proportion of $color1 (default 50%).

Returns

color

Example

sass

$brand: mix(#ff0000, #0000ff, 60%);
// ~ #990099

rgba($color, $alpha)

添加或覆盖可通过 bg-*、text-* 和 border-* 等工具使用的颜色令牌。

Parameters

Name	Type	Description
$color	color	Base color.
$alpha	number (0-1)	Alpha value.

Returns

color

Example

sass

.overlay {
  background: rgba(#000, 0.5);
}

`Directives`

4 methods

Sass control directives @mixin, @include, and @extend for reusable styles and selector inheritance.

@mixin name($args...) { ... }

Defines a reusable block of styles that can accept arguments. Invoked with @include.

Parameters

Name	Type	Description
name	identifier	Mixin name.
args	any	Optional parameters with defaults.

Returns

mixin definition

Example

sass

@mixin button($bg: blue) {
  background: $bg;
  padding: 8px 16px;
  border-radius: 4px;
}

@include name($args...)

Includes a previously defined mixin, optionally passing arguments.

Parameters

Name	Type	Description
name	identifier	Mixin name to include.
args	any	Arguments matching the mixin signature.

Returns

styles

Example

sass

.cta {
  @include button(red);
}

@extend %placeholder | .selector

Inherits the styles of another rule or placeholder, inserting the extending selector alongside the source.

Parameters

Name	Type	Description
%placeholder \| .selector	selector	Placeholder or class selector to extend.

Returns

styles

Example

sass

%card {
  border: 1px solid #ccc;
  border-radius: 6px;
}
.error-card {
  @extend %card;
  border-color: red;
}

@include name { content }

Passes a block of styles to a mixin via @content; useful for media-query wrappers.

Returns

styles

Example

sass

@mixin respond-to($bp) {
  @media (min-width: $bp) { @content; }
}
.sidebar {
  @include respond-to(768px) {
    width: 240px;
  }
}

All references