tailwindcss-plugins

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tailwind CSS Plugins

Tailwind CSS 插件

Official Plugins

官方插件

@tailwindcss/typography

Beautiful typographic defaults for content you don't control (Markdown, CMS content).

为不受你控制的内容（Markdown、CMS内容）提供美观的排版默认样式。

Installation

安装

bash

npm install -D @tailwindcss/typography

css

@import "tailwindcss";
@plugin "@tailwindcss/typography";

bash

npm install -D @tailwindcss/typography

css

@import "tailwindcss";
@plugin "@tailwindcss/typography";

Basic Usage

基础用法

html

<article class="prose">
  <h1>Article Title</h1>
  <p>This content gets beautiful default styles...</p>
</article>

html

<article class="prose">
  <h1>文章标题</h1>
  <p>此内容将应用美观的默认样式...</p>
</article>

Size Modifiers

尺寸修饰符

Class	Description
`prose-sm`	Smaller text (14px base)
`prose`	Default (16px base)
`prose-lg`	Larger text (18px base)
`prose-xl`	Extra large (20px base)
`prose-2xl`	Huge (24px base)

html

<article class="prose md:prose-lg lg:prose-xl">
  <!-- Responsive sizing -->
</article>

类名	说明
`prose-sm`	更小的文本（基础字号14px）
`prose`	默认样式（基础字号16px）
`prose-lg`	更大的文本（基础字号18px）
`prose-xl`	超大文本（基础字号20px）
`prose-2xl`	特大文本（基础字号24px）

html

<article class="prose md:prose-lg lg:prose-xl">
  <!-- 响应式尺寸 -->
</article>

Color Themes

颜色主题

html

<article class="prose prose-slate">Gray theme</article>
<article class="prose prose-zinc">Zinc theme</article>
<article class="prose prose-neutral">Neutral theme</article>
<article class="prose prose-stone">Stone theme</article>

html

<article class="prose prose-slate">灰色主题</article>
<article class="prose prose-zinc">锌色主题</article>
<article class="prose prose-neutral">中性主题</article>
<article class="prose prose-stone">石色主题</article>

Dark Mode

暗色模式

html

<article class="prose dark:prose-invert">
  <!-- Automatically inverts for dark mode -->
</article>

html

<article class="prose dark:prose-invert">
  <!-- 自动适配暗色模式反转样式 -->
</article>

Element Modifiers

元素修饰符

Override specific elements:

html

<article class="
  prose
  prose-headings:text-blue-600
  prose-a:text-blue-500
  prose-a:no-underline
  prose-code:text-pink-500
  prose-img:rounded-lg
  prose-strong:text-gray-900
  prose-blockquote:border-blue-500
">
  Content
</article>

覆盖特定元素样式：

html

<article class="
  prose
  prose-headings:text-blue-600
  prose-a:text-blue-500
  prose-a:no-underline
  prose-code:text-pink-500
  prose-img:rounded-lg
  prose-strong:text-gray-900
  prose-blockquote:border-blue-500
">
  内容
</article>

Max Width Control

最大宽度控制

html

<!-- Remove max-width constraint -->
<article class="prose max-w-none">
  Full width content
</article>

html

<!-- 移除最大宽度限制 -->
<article class="prose max-w-none">
  全屏宽度内容
</article>

Escaping Prose Styles

脱离Prose样式

html

<article class="prose">
  <h1>Styled heading</h1>
  <p>Styled paragraph</p>

  <div class="not-prose">
    <!-- This div and its children escape prose styles -->
    <CustomComponent />
  </div>

  <p>Back to prose styles</p>
</article>

html

<article class="prose">
  <h1>已应用样式的标题</h1>
  <p>已应用样式的段落</p>

  <div class="not-prose">
    <!-- 此div及其子元素将脱离prose样式 -->
    <CustomComponent />
  </div>

  <p>回到prose样式</p>
</article>

Custom Class Name

自定义类名

css

@plugin "@tailwindcss/typography" {
  className: wysiwyg;
}

html

<article class="wysiwyg">Content</article>

css

@plugin "@tailwindcss/typography" {
  className: wysiwyg;
}

html

<article class="wysiwyg">内容</article>

@tailwindcss/forms

Resets form elements to a consistent, easily-styleable baseline.

将表单元素重置为一致、易于样式化的基准样式。

Installation

安装

bash

npm install -D @tailwindcss/forms

css

@import "tailwindcss";
@plugin "@tailwindcss/forms";

bash

npm install -D @tailwindcss/forms

css

@import "tailwindcss";
@plugin "@tailwindcss/forms";

Styled Elements

已应用样式的元素

The plugin applies styles to:

```
input[type='text']
```
```
input[type='email']
```
```
input[type='password']
```
```
input[type='number']
```
```
input[type='url']
```
```
input[type='date']
```
```
input[type='datetime-local']
```
```
input[type='month']
```
```
input[type='week']
```
```
input[type='time']
```
```
input[type='search']
```
```
input[type='tel']
```
```
input[type='checkbox']
```
```
input[type='radio']
```
```
select
```
```
select[multiple]
```
```
textarea
```

该插件会为以下元素应用样式：

```
input[type='text']
```
```
input[type='email']
```
```
input[type='password']
```
```
input[type='number']
```
```
input[type='url']
```
```
input[type='date']
```
```
input[type='datetime-local']
```
```
input[type='month']
```
```
input[type='week']
```
```
input[type='time']
```
```
input[type='search']
```
```
input[type='tel']
```
```
input[type='checkbox']
```
```
input[type='radio']
```
```
select
```
```
select[multiple]
```
```
textarea
```

Basic Usage

基础用法

html

<!-- Text input -->
<input type="email" class="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500">

<!-- Select -->
<select class="rounded-lg border-gray-300">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<!-- Checkbox -->
<input type="checkbox" class="rounded text-blue-500 focus:ring-blue-500">

<!-- Radio -->
<input type="radio" class="text-blue-500 focus:ring-blue-500">

<!-- Textarea -->
<textarea class="rounded-lg border-gray-300" rows="4"></textarea>

html

<!-- 文本输入框 -->
<input type="email" class="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500">

<!-- 下拉选择框 -->
<select class="rounded-lg border-gray-300">
  <option>选项1</option>
  <option>选项2</option>
</select>

<!-- 复选框 -->
<input type="checkbox" class="rounded text-blue-500 focus:ring-blue-500">

<!-- 单选框 -->
<input type="radio" class="text-blue-500 focus:ring-blue-500">

<!-- 文本域 -->
<textarea class="rounded-lg border-gray-300" rows="4"></textarea>

Strategy: Class-Based

策略：基于类名

For opt-in styling (doesn't apply global resets):

css

@plugin "@tailwindcss/forms" {
  strategy: class;
}

html

<!-- Explicitly opt-in to form styles -->
<input type="text" class="form-input rounded-lg">
<select class="form-select rounded-lg">
<textarea class="form-textarea rounded-lg">
<input type="checkbox" class="form-checkbox rounded">
<input type="radio" class="form-radio">

用于可选式样式（不应用全局重置）：

css

@plugin "@tailwindcss/forms" {
  strategy: class;
}

html

<!-- 显式启用表单样式 -->
<input type="text" class="form-input rounded-lg">
<select class="form-select rounded-lg">
<textarea class="form-textarea rounded-lg">
<input type="checkbox" class="form-checkbox rounded">
<input type="radio" class="form-radio">

Form Classes Reference

表单类名参考

Class	Element
`form-input`	Text inputs
`form-textarea`	Textareas
`form-select`	Selects
`form-multiselect`	Multiple selects
`form-checkbox`	Checkboxes
`form-radio`	Radio buttons

类名	元素
`form-input`	文本输入框
`form-textarea`	文本域
`form-select`	下拉选择框
`form-multiselect`	多选下拉框
`form-checkbox`	复选框
`form-radio`	单选框

Styling Checkboxes/Radios

复选框/单选框样式

html

<!-- Colored checkbox -->
<input type="checkbox" class="rounded text-pink-500">

<!-- Accent color (native) -->
<input type="checkbox" class="accent-purple-600">

<!-- Custom size -->
<input type="checkbox" class="h-6 w-6 rounded text-blue-500">

html

<!-- 彩色复选框 -->
<input type="checkbox" class="rounded text-pink-500">

<!-- 强调色（原生） -->
<input type="checkbox" class="accent-purple-600">

<!-- 自定义尺寸 -->
<input type="checkbox" class="h-6 w-6 rounded text-blue-500">

@tailwindcss/container-queries

Style elements based on their container's size instead of the viewport.

根据元素容器的尺寸而非视口尺寸来设置样式。

Installation

安装

bash

npm install -D @tailwindcss/container-queries

css

@import "tailwindcss";
@plugin "@tailwindcss/container-queries";

bash

npm install -D @tailwindcss/container-queries

css

@import "tailwindcss";
@plugin "@tailwindcss/container-queries";

Basic Usage

基础用法

html

<!-- Define a container -->
<div class="@container">
  <!-- Use container query breakpoints -->
  <div class="flex flex-col @md:flex-row @lg:gap-8">
    <div class="@sm:text-lg @md:text-xl">
      Responsive to container, not viewport
    </div>
  </div>
</div>

html

<!-- 定义一个容器 -->
<div class="@container">
  <!-- 使用容器查询断点 -->
  <div class="flex flex-col @md:flex-row @lg:gap-8">
    <div class="@sm:text-lg @md:text-xl">
      响应容器尺寸而非视口尺寸
    </div>
  </div>
</div>

Container Breakpoints

容器断点

Prefix	Width
`@xs`	320px
`@sm`	384px
`@md`	448px
`@lg`	512px
`@xl`	576px
`@2xl`	672px
`@3xl`	768px
`@4xl`	896px
`@5xl`	1024px
`@6xl`	1152px
`@7xl`	1280px

前缀	宽度
`@xs`	320px
`@sm`	384px
`@md`	448px
`@lg`	512px
`@xl`	576px
`@2xl`	672px
`@3xl`	768px
`@4xl`	896px
`@5xl`	1024px
`@6xl`	1152px
`@7xl`	1280px

Named Containers

命名容器

html

<!-- Name the container -->
<div class="@container/sidebar">
  <!-- Reference by name -->
  <div class="@md/sidebar:flex">
    Only flex when sidebar container is md
  </div>
</div>

<div class="@container/main">
  <div class="@lg/main:grid-cols-3">
    Grid when main container is lg
  </div>
</div>

html

<!-- 为容器命名 -->
<div class="@container/sidebar">
  <!-- 通过名称引用 -->
  <div class="@md/sidebar:flex">
    仅当侧边栏容器尺寸为md时启用flex布局
  </div>
</div>

<div class="@container/main">
  <div class="@lg/main:grid-cols-3">
    当主容器尺寸为lg时启用三列网格布局
  </div>
</div>

Arbitrary Container Values

自定义容器值

html

<div class="@container">
  <div class="@[400px]:flex @[600px]:grid">
    Arbitrary breakpoint values
  </div>
</div>

html

<div class="@container">
  <div class="@[400px]:flex @[600px]:grid">
    自定义断点值
  </div>
</div>

Creating Custom Plugins (v4)

创建自定义插件（v4版本）

CSS-Only Utilities

纯CSS工具类

For simple utilities, use the

@utility

directive instead of a JavaScript plugin:

css

/* In your CSS file */
@utility content-auto {
  content-visibility: auto;
}

@utility text-balance {
  text-wrap: balance;
}

@utility scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@utility scrollbar-none::-webkit-scrollbar {
  display: none;
}

对于简单的工具类，使用

@utility

指令而非JavaScript插件：

css

/* 在你的CSS文件中 */
@utility content-auto {
  content-visibility: auto;
}

@utility text-balance {
  text-wrap: balance;
}

@utility scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@utility scrollbar-none::-webkit-scrollbar {
  display: none;
}

JavaScript Plugins

JavaScript插件

For complex plugins requiring JavaScript:

javascript

// plugins/my-plugin.js
import plugin from 'tailwindcss/plugin'

export default plugin(function({ addUtilities, addComponents, matchUtilities, theme }) {
  // Add static utilities
  addUtilities({
    '.content-auto': {
      'content-visibility': 'auto',
    },
    '.text-balance': {
      'text-wrap': 'balance',
    },
  })

  // Add components
  addComponents({
    '.btn': {
      padding: theme('spacing.2') + ' ' + theme('spacing.4'),
      borderRadius: theme('borderRadius.lg'),
      fontWeight: theme('fontWeight.medium'),
    },
    '.btn-primary': {
      backgroundColor: theme('colors.blue.500'),
      color: theme('colors.white'),
      '&:hover': {
        backgroundColor: theme('colors.blue.600'),
      },
    },
  })

  // Add dynamic utilities
  matchUtilities(
    {
      'text-shadow': (value) => ({
        textShadow: value,
      }),
    },
    { values: theme('textShadow') }
  )
})

Load in CSS:

css

@import "tailwindcss";
@plugin "./plugins/my-plugin.js";

对于需要JavaScript的复杂插件：

javascript

// plugins/my-plugin.js
import plugin from 'tailwindcss/plugin'

export default plugin(function({ addUtilities, addComponents, matchUtilities, theme }) {
  // 添加静态工具类
  addUtilities({
    '.content-auto': {
      'content-visibility': 'auto',
    },
    '.text-balance': {
      'text-wrap': 'balance',
    },
  })

  // 添加组件
  addComponents({
    '.btn': {
      padding: theme('spacing.2') + ' ' + theme('spacing.4'),
      borderRadius: theme('borderRadius.lg'),
      fontWeight: theme('fontWeight.medium'),
    },
    '.btn-primary': {
      backgroundColor: theme('colors.blue.500'),
      color: theme('colors.white'),
      '&:hover': {
        backgroundColor: theme('colors.blue.600'),
      },
    },
  })

  // 添加动态工具类
  matchUtilities(
    {
      'text-shadow': (value) => ({
        textShadow: value,
      }),
    },
    { values: theme('textShadow') }
  )
})

在CSS中加载：

css

@import "tailwindcss";
@plugin "./plugins/my-plugin.js";

Plugin with Theme Extension

带主题扩展的插件

javascript

// plugins/gradients.js
import plugin from 'tailwindcss/plugin'

export default plugin(
  function({ matchUtilities, theme }) {
    matchUtilities(
      {
        'text-gradient': (value) => ({
          backgroundImage: value,
          backgroundClip: 'text',
          color: 'transparent',
        }),
      },
      { values: theme('textGradient') }
    )
  },
  {
    theme: {
      textGradient: {
        primary: 'linear-gradient(to right, #667eea, #764ba2)',
        secondary: 'linear-gradient(to right, #f093fb, #f5576c)',
        sunset: 'linear-gradient(to right, #fa709a, #fee140)',
      },
    },
  }
)

javascript

// plugins/gradients.js
import plugin from 'tailwindcss/plugin'

export default plugin(
  function({ matchUtilities, theme }) {
    matchUtilities(
      {
        'text-gradient': (value) => ({
          backgroundImage: value,
          backgroundClip: 'text',
          color: 'transparent',
        }),
      },
      { values: theme('textGradient') }
    )
  },
  {
    theme: {
      textGradient: {
        primary: 'linear-gradient(to right, #667eea, #764ba2)',
        secondary: 'linear-gradient(to right, #f093fb, #f5576c)',
        sunset: 'linear-gradient(to right, #fa709a, #fee140)',
      },
    },
  }
)

Adding Custom Variants

添加自定义变体

javascript

// plugins/variants.js
import plugin from 'tailwindcss/plugin'

export default plugin(function({ addVariant }) {
  // Peer states
  addVariant('peer-checked', ':merge(.peer):checked ~ &')

  // Group states
  addVariant('group-focus-visible', ':merge(.group):focus-visible &')

  // Data attributes
  addVariant('data-active', '&[data-active="true"]')
  addVariant('data-loading', '&[data-loading]')

  // Custom selectors
  addVariant('hocus', ['&:hover', '&:focus'])
  addVariant('not-first', '&:not(:first-child)')
  addVariant('not-last', '&:not(:last-child)')
})

javascript

// plugins/variants.js
import plugin from 'tailwindcss/plugin'

export default plugin(function({ addVariant }) {
  // 同级元素状态
  addVariant('peer-checked', ':merge(.peer):checked ~ &')

  // 组状态
  addVariant('group-focus-visible', ':merge(.group):focus-visible &')

  // 数据属性
  addVariant('data-active', '&[data-active="true"]')
  addVariant('data-loading', '&[data-loading]')

  // 自定义选择器
  addVariant('hocus', ['&:hover', '&:focus'])
  addVariant('not-first', '&:not(:first-child)')
  addVariant('not-last', '&:not(:last-child)')
})

Community Plugins

社区插件

Popular Plugins

Plugin	Description
`tailwindcss-animate`	Animation utilities
`tailwindcss-motion`	Advanced motion/animation
`@headlessui/tailwindcss`	Headless UI variants
`tailwind-scrollbar`	Scrollbar styling
`tailwindcss-3d`	3D transform utilities
`tailwindcss-fluid-type`	Fluid typography

插件	说明
`tailwindcss-animate`	动画工具类
`tailwindcss-motion`	高级动效/动画
`@headlessui/tailwindcss`	Headless UI变体
`tailwind-scrollbar`	滚动条样式
`tailwindcss-3d`	3D变换工具类
`tailwindcss-fluid-type`	流式排版

tailwindcss-animate

bash

npm install -D tailwindcss-animate

css

@plugin "tailwindcss-animate";

html

<div class="animate-in fade-in slide-in-from-bottom-4 duration-500">
  Animated content
</div>

<div class="animate-out fade-out slide-out-to-top-4 duration-300">
  Exiting content
</div>

bash

npm install -D tailwindcss-animate

css

@plugin "tailwindcss-animate";

html

<div class="animate-in fade-in slide-in-from-bottom-4 duration-500">
  带动画的内容
</div>

<div class="animate-out fade-out slide-out-to-top-4 duration-300">
  退出动画内容
</div>

Best Practices

最佳实践

1. Load Only What You Need

1. 仅加载你需要的插件

css

/* Only load plugins you actually use */
@plugin "@tailwindcss/typography";
/* @plugin "@tailwindcss/forms"; -- commented out if not using */

css

/* 仅加载实际使用的插件 */
@plugin "@tailwindcss/typography";
/* @plugin "@tailwindcss/forms"; -- 不使用时注释掉 */

2. Use CSS Utilities First

2. 优先使用CSS工具类

Before creating a JavaScript plugin, try the

@utility

directive:

css

/* Simple custom utility - no JS needed */
@utility glass {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
}

在创建JavaScript插件之前，先尝试使用

@utility

指令：

css

/* 简单的自定义工具类 - 无需JS */
@utility glass {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
}

3. Document Custom Plugins

3. 为自定义插件添加文档

javascript

/**
 * @name Text Gradient Plugin
 * @description Adds text gradient utilities
 * @usage class="text-gradient-primary"
 */
export default plugin(...)

javascript

/**
 * @name 文本渐变插件
 * @description 添加文本渐变工具类
 * @usage class="text-gradient-primary"
 */
export default plugin(...)

4. Test Plugin Compatibility

4. 测试插件兼容性

When upgrading Tailwind, verify all plugins work with the new version:

bash

npm outdated | grep tailwind
npm update @tailwindcss/typography @tailwindcss/forms

升级Tailwind时，验证所有插件是否兼容新版本：

bash

npm outdated | grep tailwind
npm update @tailwindcss/typography @tailwindcss/forms

tailwindcss-plugins

Original

Translation

Tailwind CSS Plugins

Tailwind CSS 插件

Official Plugins

官方插件

@tailwindcss/typography

@tailwindcss/typography

Installation

安装

Basic Usage

基础用法

Size Modifiers

尺寸修饰符

Color Themes

颜色主题

Dark Mode

暗色模式

Element Modifiers

元素修饰符

Max Width Control

最大宽度控制

Escaping Prose Styles

脱离Prose样式

Custom Class Name

自定义类名

@tailwindcss/forms

@tailwindcss/forms

Installation

安装

Styled Elements

已应用样式的元素

Basic Usage

基础用法

Strategy: Class-Based

策略：基于类名

Form Classes Reference

表单类名参考

Styling Checkboxes/Radios

复选框/单选框样式

@tailwindcss/container-queries

@tailwindcss/container-queries

Installation

安装

Basic Usage

基础用法

Container Breakpoints

容器断点

Named Containers

命名容器

Arbitrary Container Values

自定义容器值

Creating Custom Plugins (v4)

创建自定义插件（v4版本）

CSS-Only Utilities

纯CSS工具类

JavaScript Plugins

JavaScript插件

Plugin with Theme Extension

带主题扩展的插件

Adding Custom Variants

添加自定义变体

Community Plugins

社区插件

Popular Plugins

热门插件

tailwindcss-animate

tailwindcss-animate

Best Practices

最佳实践

1. Load Only What You Need

1. 仅加载你需要的插件

2. Use CSS Utilities First

2. 优先使用CSS工具类

3. Document Custom Plugins

3. 为自定义插件添加文档

4. Test Plugin Compatibility

4. 测试插件兼容性