扩展TailwindCSS工具类及自定义圆角别名是否影响最终构建体积？

1. 扩展TailwindCSS工具类是否会影响最终构建体积？ #

• 不会无差别增加体积。Tailwind的JIT编译模式只会编译你实际在代码中用到的类，如果只是在配置里扩展了工具类但从未使用，这些类不会出现在最终CSS里，完全不影响体积。
• 只有当你实际使用了扩展的工具类时，对应的CSS规则才会被生成，这时候才会带来少量体积增长（对应新类的CSS定义）。

2. 自定义圆角别名是否会增加最终CSS构建体积？ #

你给出的配置代码如下：

theme: {
  extend: {
    borderRadius: {
      card: ({ theme }) => theme('borderRadius.sm'),
    },
  },
}

针对这个场景的解答：

• 会生成额外的CSS。当你在HTML中使用rounded-card时，Tailwind会单独生成.rounded-card { border-radius: var(--tw-border-radius); }这条规则，而rounded-sm对应的是设置--tw-border-radius: 0.125rem;的变量规则。
• Tailwind目前不会对值相同的不同类名做合并优化。哪怕两个类最终的渲染效果完全一致，只要类名不一样，就会生成两条独立的CSS规则。
• 和直接用rounded-sm相比，用rounded-card会多一条类选择器规则，体积会有极其微小的增加，但这种量级的增长在实际项目中几乎可以忽略。

内容的提问来源于stack exchange，提问作者Cytronic