tailwindcss-plugins

Tailwind CSS 插件

官方插件

@tailwindcss/typography

为你无法控制的内容（Markdown、CMS 内容）提供精美的排版默认样式。

安装

npm install -D @tailwindcss/typography

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

基本用法

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

尺寸修饰符

类	描述
prose-sm	较小文本（基准字号为 14px）
prose	默认（基准字号为 16px）
prose-lg	较大文本（基准字号为 18px）
prose-xl	特大文本（基准字号为 20px）
prose-2xl	超大文本（基准字号为 24px）

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

颜色主题

<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>

深色模式

<article class="prose dark:prose-invert">
  
</article>

元素修饰符

覆盖特定元素：

<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>

最大宽度控制

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

禁用 prose 样式

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

  <div class="not-prose">
    
    <CustomComponent />
  </div>

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

自定义类名

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

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

@tailwindcss/forms

将表单元素重置为统一且易于设置样式的基础状态。

安装

npm install -D @tailwindcss/forms

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

设置样式的元素

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

• 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="email" class="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500">


<select class="rounded-lg border-gray-300">
  <option>Option 1</option>
  <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>

策略：基于类

用于选择性启用样式（不会应用全局重置）：

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

<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-input	文本输入框
form-textarea	多行文本框
form-select	选择框
form-multiselect	多选框
form-checkbox	复选框
form-radio	单选按钮

设置复选框/单选按钮的样式

<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

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

安装

npm install -D @tailwindcss/container-queries

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

基本用法

<div class="@container">
  
  <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>

容器断点

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

命名容器

<div class="@container/sidebar">
  
  <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>

任意容器值

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

创建自定义插件（v4）

仅 CSS 的工具类

对于简单的工具类，请使用 @utility 指令，而非 JavaScript 插件：

/* 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;
}

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') }
  )
})

在 CSS 中加载：

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

带主题扩展的插件

// 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)',
      },
    },
  }
)

添加自定义变体

// 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)')
})

社区插件

常用插件

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

tailwindcss-animate

npm install -D tailwindcss-animate

@plugin "tailwindcss-animate";

<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>

最佳实践

1. 只加载所需内容

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

2. 优先使用 CSS 工具类

创建 JavaScript 插件之前，先尝试使用 @utility 指令：

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

3. 编写自定义插件文档

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

4. 测试插件兼容性

升级 Tailwind 时，请确认所有插件都能与新版本配合使用：

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