09. 插件系统

1. 什么是 Tailwind 插件

Tailwind 插件是扩展 Tailwind 功能的 JavaScript 模块，可以：

• 添加新的工具类
• 添加新的组件类
• 添加新的变体
• 添加自定义样式

插件的作用
├── 添加工具类 (.shadow-glow)
├── 添加组件类 (.btn-primary)
├── 添加变体 (children:)
└── 添加自定义样式

---

2. 官方插件

2.1 常用官方插件

插件	用途	安装命令
typography	文章排版	@tailwindcss/typography
forms	表单样式重置	@tailwindcss/forms
aspect-ratio	宽高比	@tailwindcss/aspect-ratio
container-queries	容器查询	@tailwindcss/container-queries

2.2 安装官方插件

npm install @tailwindcss/typography @tailwindcss/forms

2.3 使用官方插件

/* src/index.css */
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

2.4 插件效果示例

Typography 插件：

<!-- 文章排版，自动美化标题、段落、列表 -->
<article class="prose prose-lg">
  <h1>文章标题</h1>
  <p>这是一段正文，Typography 插件会自动美化排版样式。</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</article>

Forms 插件：

<!-- 统一表单样式 -->
<input type="text" class="form-input">
<select class="form-select">
  <option>选项</option>
</select>
<input type="checkbox" class="form-checkbox">

Aspect Ratio 插件：

<!-- 固定宽高比 -->
<div class="aspect-video">
  <video>视频内容</video>
</div>

---

3. 创建自定义插件

3.1 插件基本结构

// plugins/custom-plugin.js
const plugin = require('tailwindcss/plugin');

module.exports = plugin(function({ addUtilities, addComponents, addVariant, theme }) {
  // 添加工具类
  addUtilities({
    '.text-gradient': {
      background: 'linear-gradient(135deg, #6366f1, #a855f7)',
      '-webkit-background-clip': 'text',
      'background-clip': 'text',
      'color': 'transparent',
    },
    '.shadow-glow': {
      boxShadow: '0 0 15px rgba(99, 102, 241, 0.5)',
    },
  });
  
  // 添加组件类
  addComponents({
    '.btn': {
      padding: '0.5rem 1rem',
      borderRadius: '0.375rem',
      fontWeight: '500',
      transition: 'all 0.2s',
    },
    '.btn-primary': {
      backgroundColor: '#3b82f6',
      color: '#fff',
      '&:hover': {
        backgroundColor: '#2563eb',
      },
    },
  });
  
  // 添加变体
  addVariant('children', '& > *');
  addVariant('group-hover', '.group:hover &');
});

3.2 使用自定义插件

/* src/index.css */
@import "tailwindcss";
@plugin "./plugins/custom-plugin.js";

<!-- 使用自定义工具类 -->
<h1 class="text-gradient">渐变文字</h1>
<div class="shadow-glow">发光阴影</div>

<!-- 使用自定义组件类 -->
<button class="btn btn-primary">按钮</button>

<!-- 使用自定义变体 -->
<div class="children:mb-2">
  <div>每个子元素都有下边距</div>
  <div>每个子元素都有下边距</div>
</div>

---

4. 实用插件示例

4.1 间距工具类插件

// plugins/spacing.js
module.exports = plugin(function({ addUtilities, theme }) {
  const spacing = theme('spacing');
  const utilities = {};
  
  // 生成 .mt-1, .mb-2, .my-3 等
  Object.keys(spacing).forEach(key => {
    const value = spacing[key];
    utilities[`.mt-${key}`] = { marginTop: value };
    utilities[`.mb-${key}`] = { marginBottom: value };
    utilities[`.ml-${key}`] = { marginLeft: value };
    utilities[`.mr-${key}`] = { marginRight: value };
    utilities[`.mx-${key}`] = { marginLeft: value, marginRight: value };
    utilities[`.my-${key}`] = { marginTop: value, marginBottom: value };
  });
  
  addUtilities(utilities);
});

4.2 动画插件

// plugins/animations.js
module.exports = plugin(function({ addUtilities }) {
  addUtilities({
    '.animate-fade-in': {
      animation: 'fadeIn 0.5s ease-out',
    },
    '.animate-slide-up': {
      animation: 'slideUp 0.3s ease-out',
    },
    '.animate-bounce-slow': {
      animation: 'bounce 2s infinite',
    },
    '.animate-pulse-slow': {
      animation: 'pulse 3s infinite',
    },
  });
  
  // 同时添加 keyframes
  addUtilities({
    '@keyframes fadeIn': {
      from: { opacity: 0, transform: 'translateY(10px)' },
      to: { opacity: 1, transform: 'translateY(0)' },
    },
    '@keyframes slideUp': {
      from: { transform: 'translateY(100%)' },
      to: { transform: 'translateY(0)' },
    },
  });
});

4.3 表单样式插件

// plugins/forms.js
module.exports = plugin(function({ addComponents }) {
  addComponents({
    '.form-input': {
      width: '100%',
      padding: '0.5rem 0.75rem',
      border: '1px solid #e2e8f0',
      borderRadius: '0.375rem',
      outline: 'none',
      transition: 'all 0.2s',
      '&:focus': {
        borderColor: '#3b82f6',
        boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)',
      },
    },
    '.form-label': {
      display: 'block',
      fontSize: '0.875rem',
      fontWeight: '500',
      marginBottom: '0.25rem',
      color: '#374151',
    },
    '.form-error': {
      fontSize: '0.75rem',
      color: '#ef4444',
      marginTop: '0.25rem',
    },
  });
});

4.4 滚动条样式插件

// plugins/scrollbar.js
module.exports = plugin(function({ addUtilities }) {
  addUtilities({
    '.scrollbar-thin': {
      scrollbarWidth: 'thin',
      '&::-webkit-scrollbar': {
        width: '6px',
        height: '6px',
      },
      '&::-webkit-scrollbar-track': {
        backgroundColor: '#f1f1f1',
        borderRadius: '3px',
      },
      '&::-webkit-scrollbar-thumb': {
        backgroundColor: '#c1c1c1',
        borderRadius: '3px',
        '&:hover': {
          backgroundColor: '#a8a8a8',
        },
      },
    },
    '.scrollbar-hidden': {
      scrollbarWidth: 'none',
      '&::-webkit-scrollbar': {
        display: 'none',
      },
    },
  });
});

---

5. 插件参数配置

5.1 接收配置参数

// plugins/button.js
module.exports = plugin.withOptions(function(options = {}) {
  return function({ addComponents }) {
    const colors = options.colors || {
      primary: '#3b82f6',
      secondary: '#6b7280',
      danger: '#ef4444',
    };
    
    const components = {};
    
    Object.keys(colors).forEach(color => {
      components[`.btn-${color}`] = {
        backgroundColor: colors[color],
        color: '#fff',
        padding: '0.5rem 1rem',
        borderRadius: '0.375rem',
        '&:hover': {
          backgroundColor: this.darken(colors[color]),
        },
      };
    });
    
    addComponents(components);
  };
});

/* 使用带参数的插件 */
@plugin "./plugins/button.js" {
  colors: {
    primary: '#6366f1',
    secondary: '#8b5cf6',
  }
}

---

6. 第三方插件推荐

6.1 常用第三方插件

插件	用途	npm
tailwindcss-animate	动画库	tailwindcss-animate
tailwindcss-3d	3D 变换	tailwindcss-3d
tailwindcss-typography	文章排版	@tailwindcss/typography
tailwindcss-forms	表单样式	@tailwindcss/forms
tailwindcss-container-queries	容器查询	@tailwindcss/container-queries

6.2 安装和使用

npm install tailwindcss-animate tailwindcss-3d

@import "tailwindcss";
@plugin "tailwindcss-animate";
@plugin "tailwindcss-3d";

<!-- tailwindcss-animate 提供动画 -->
<div class="animate-fade-in-up">淡入上升</div>

<!-- tailwindcss-3d 提供 3D 变换 -->
<div class="rotate-x-45 rotate-y-30">3D 旋转</div>

---

7. 创建插件包

7.1 插件包结构

tailwindcss-my-plugin/
├── package.json
├── index.js
├── README.md
└── LICENSE

7.2 package.json

{
  "name": "tailwindcss-my-plugin",
  "version": "1.0.0",
  "description": "My custom Tailwind plugin",
  "main": "index.js",
  "peerDependencies": {
    "tailwindcss": ">=4.0.0"
  },
  "keywords": [
    "tailwind",
    "tailwindcss",
    "plugin"
  ]
}

7.3 index.js

const plugin = require('tailwindcss/plugin');

module.exports = plugin(function({ addUtilities }) {
  addUtilities({
    '.my-utility': {
      // 你的样式
    },
  });
});

7.4 发布到 npm

npm login
npm publish

---

8. 练习

练习 1：创建渐变插件

创建一个插件，添加以下工具类：

• .gradient-primary：从蓝色到紫色的渐变
• .gradient-success：从绿色到青色的渐变
• .gradient-warning：从黄色到橙色的渐变

参考答案：

module.exports = plugin(function({ addUtilities }) {
  addUtilities({
    '.gradient-primary': {
      background: 'linear-gradient(135deg, #3b82f6, #a855f7)',
    },
    '.gradient-success': {
      background: 'linear-gradient(135deg, #10b981, #06b6d4)',
    },
    '.gradient-warning': {
      background: 'linear-gradient(135deg, #f59e0b, #f97316)',
    },
  });
});

练习 2：创建文本截断插件

创建以下工具类：

• .line-clamp-1：限制 1 行
• .line-clamp-2：限制 2 行
• .line-clamp-3：限制 3 行

参考答案：

module.exports = plugin(function({ addUtilities }) {
  const clamp = (lines) => ({
    display: '-webkit-box',
    '-webkit-line-clamp': lines,
    '-webkit-box-orient': 'vertical',
    overflow: 'hidden',
  });
  
  addUtilities({
    '.line-clamp-1': clamp(1),
    '.line-clamp-2': clamp(2),
    '.line-clamp-3': clamp(3),
  });
});

---

9. 总结

概念	说明
官方插件	typography、forms、aspect-ratio 等
自定义插件	添加工具类、组件类、变体
插件结构	module.exports = plugin(function({ addUtilities }) {})
带参数插件	plugin.withOptions(function(options) {})
插件包	可发布到 npm 分享

一句话总结：

Tailwind 插件是扩展 Tailwind 功能的模块，可以添加自定义工具类、组件类和变体，官方插件和第三方插件极大丰富了 Tailwind 的能力。

---

10. 下一步

掌握了插件系统后，接下来学习最佳实践：

👉 下一节：10. 最佳实践