本节将介绍如何参与 Tailwind CSS 社区生态建设，包括插件开发、组件贡献、文档建设等方面。

插件开发

插件基础结构

  1. // plugins/myPlugin.js
  2. const plugin = require('tailwindcss/plugin')
  4. module.exports = plugin(function({ addUtilities, addComponents, theme }) {
  5.   // 添加工具类
  6.   addUtilities({
  7.     '.custom-utility': {
  8.       padding: theme('spacing.4'),
  9.       backgroundColor: theme('colors.blue.500'),
  10.       color: theme('colors.white'),
  11.       borderRadius: theme('borderRadius.lg')
  12.     }
  13.   })
  15.   // 添加组件
  16.   addComponents({
  17.     '.custom-component': {
  18.       backgroundColor: theme('colors.white'),
  19.       borderRadius: theme('borderRadius.lg'),
  20.       padding: theme('spacing.6'),
  21.       boxShadow: theme('boxShadow.lg')
  22.     }
  23.   })
  24. }, {
  25.   // 配置项
  26.   theme: {
  27.     extend: {
  28.       colors: {
  29.         custom: {
  30.           100: '#f0f9ff',
  31.           500: '#0ea5e9',
  32.           900: '#0c4a6e'
  33.         }
  34.       }
  35.     }
  36.   }
  37. })

插件发布流程

  1. // package.json
  2. {
  3.   "name": "tailwindcss-custom-plugin",
  4.   "version": "1.0.0",
  5.   "main": "index.js",
  6.   "files": [
  7.     "index.js",
  8.     "styles.css"
  9.   ],
  10.   "peerDependencies": {
  11.     "tailwindcss": "^3.0.0"
  12.   },
  13.   "scripts": {
  14.     "build": "postcss styles.css -o dist/styles.css",
  15.     "test": "jest",
  16.     "prepublishOnly": "npm run build && npm test"
  17.   }
  18. }

组件贡献

组件开发规范

  1. // components/CustomButton.tsx
  2. interface CustomButtonProps {
  3.   variant?: 'primary' | 'secondary';
  4.   size?: 'sm' | 'md' | 'lg';
  5.   className?: string;
  6.   children: React.ReactNode;
  7. }
  9. const CustomButton: React.FC<CustomButtonProps> = ({
  10.   variant = 'primary',
  11.   size = 'md',
  12.   className = '',
  13.   children
  14. }) => {
  15.   const baseStyles = 'inline-flex items-center justify-center rounded-lg font-medium transition-colors'
  17.   const variantStyles = {
  18.     primary: 'bg-blue-500 text-white hover:bg-blue-600',
  19.     secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200'
  20.   }
  22.   const sizeStyles = {
  23.     sm: 'px-3 py-1.5 text-sm',
  24.     md: 'px-4 py-2 text-base',
  25.     lg: 'px-6 py-3 text-lg'
  26.   }
  28.   return (
  29.     <button
  30.       className={[
  31.         baseStyles,
  32.         variantStyles[variant],
  33.         sizeStyles[size],
  34.         className
  35.       ].join(' ')}
  36.     >
  37.       {children}
  38.     </button>
  39.   )
  40. }
  42. export default CustomButton

组件文档规范

  1. # CustomButton
  3. 可定制的按钮组件，支持多种样式变体和尺寸。
  5. ## 安装
  7. npm install @your-org/custom-button
  9. ## 使用
  11. import CustomButton from '@your-org/custom-button'
  13. function App() {
  14.   return (
  15.     <CustomButton
  16.       variant="primary"
  17.       size="md"
  18.       className="my-custom-class"
  19.     >
  20.       点击我
  21.     </CustomButton>
  22.   )
  23. }
  25. ## Props
  27. | 属性      | 类型     | 默认值    | 说明     |
  28. |----------|----------|-----------|----------|
  29. | variant  | string   | 'primary' | 按钮变体  |
  30. | size     | string   | 'md'      | 按钮尺寸  |
  31. | className| string   | ''        | 自定义类名 |
  32. | children | ReactNode| -         | 按钮内容  |

文档建设

文档站点结构

  1. // docs/components/Layout.tsx
  2. const Layout: React.FC = ({ children }) => {
  3.   return (
  4.     <div className="min-h-screen bg-white">
  5.       {/* 导航栏 */}
  6.       <nav className="bg-white shadow-sm">
  7.         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  8.           <div className="flex justify-between h-16">
  9.             <div className="flex">
  10.               <div className="flex-shrink-0 flex items-center">
  11.                 <img
  12.                   className="h-8 w-auto"
  13.                   src="/logo.svg"
  14.                   alt="Logo"
  15.                 />
  16.               </div>
  17.               <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
  18.                 <a
  19.                   href="#"
  20.                   className="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
  21.                 >
  22.                   文档
  23.                 </a>
  24.                 {/* 更多导航项 */}
  25.               </div>
  26.             </div>
  27.           </div>
  28.         </div>
  29.       </nav>
  31.       {/* 主要内容 */}
  32.       <div className="py-10">
  33.         <main>
  34.           <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
  35.             {children}
  36.           </div>
  37.         </main>
  38.       </div>
  39.     </div>
  40.   )
  41. }

MDX 集成示例

  1. // docs/pages/components/button.mdx
  2. import { CustomButton } from '@/components'
  4. # 按钮组件
  6. 按钮用于触发操作或事件。
  8. ## 基础用法
  10. <CustomButton>默认按钮</CustomButton>
  12. <CustomButton>默认按钮</CustomButton>

变体

  1. <div className="space-x-4">
  2.   <CustomButton variant="primary">主要按钮</CustomButton>
  3.   <CustomButton variant="secondary">次要按钮</CustomButton>
  4. </div>
  6. <CustomButton variant="primary">主要按钮</CustomButton>
  7. <CustomButton variant="secondary">次要按钮</CustomButton>
  9. ## API
  11. | 参数     | 说明     | 类型    | 默认值   |
  12. |----------|---------|---------|----------|
  13. | variant  | 变体样式 | string  | 'primary'|
  14. | size     | 尺寸    | string  | 'md'     |

社区互动

Issue 模板

  1. # Issue 模板
  3. ## 问题类型
  5. - [ ] Bug 报告
  6. - [ ] 功能请求
  7. - [ ] 文档改进
  8. - [ ] 其他
  10. ## 问题描述
  12. [详细描述你的问题]
  14. ## 复现步骤
  16. 1. [第一步]
  17. 2. [第二步]
  18. 3. [更多步骤...]
  20. ## 期望行为
  22. [描述你期望看到的结果]
  24. ## 实际行为
  26. [描述实际发生的情况]
  28. ## 环境信息
  30. - Tailwind CSS 版本:
  31. - Node.js 版本:
  32. - 浏览器版本:
  33. - 操作系统:
  35. ## 其他信息
  37. [其他相关信息]

Pull Request 模板

  1. # Pull Request 模板
  3. ## 变更说明
  5. [描述这个 PR 做了什么]
  7. ## 变更类型
  9. - [ ] Bug 修复
  10. - [ ] 新功能
  11. - [ ] 代码优化
  12. - [ ] 文档更新
  13. - [ ] 其他
  15. ## 检查清单
  17. - [ ] 代码遵循项目规范
  18. - [ ] 添加了必要的测试
  19. - [ ] 更新了相关文档
  20. - [ ] 所有测试通过
  21. - [ ] 变更已经在本地测试
  23. ## 关联 Issue
  25. Fixes #[issue number]
  27. ## 截图（如果适用）
  29. [添加截图]
  31. ## 其他说明
  33. [其他需要说明的内容]

最佳实践

  1. 插件开发

    • 遵循命名规范
    • 完善的文档
    • 充分的测试

  2. 组件贡献

    • 组件职责单一
    • 接口设计合理
    • 样式可定制

  3. 文档建设

    • 结构清晰
    • 示例完整
    • 及时更新

  4. 社区参与

    • 积极回应问题
    • 遵循贡献规范
    • 维护友好氛围