Tailwind CSS 工作流秘籍

Tailwind 改变了我们编写 CSS 的方式，但如果不加以管理，Class 列表可能会变得混乱。

使用插件扩展功能

您可以在 tailwind.config.js 中定义自己的插件，以保持设计系统的一致性：

javascript

          module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#10b981',
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    function({ addUtilities }) {
      addUtilities({
        '.rotate-45': {
          transform: 'rotate(45deg)',
        },
      })
    }
  ],
}

最佳实践

使用 cn 工具类库（如 clsx 和 tailwind-merge）。
利用编辑器的自动补全功能。
保持 HTML 结构的语义化。