fix .less file using tailwind @apply not working

[xiekw2010]

It needs to add postcss tailwindcss plugins when umi g tailwindcss

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
umi	⬜️ Ignored (Inspect)	Visit Preview		Jan 5, 2024 2:14pm

[fz6m]

现在的情况是 umi 中无法使用 @apply ，这是有原因的，因为 tailwind 作者非常不推荐使用 @apply 函数（可参考官方文档和作者 twitter），他认为 @aplly 是 tailwind 设计的失败，所以我们不应该使用 @apply 函数，因为这样等于失去了 atom 原子化的意义，那么我们就没必要用 tailwind 了。

如果添加这一行配置，此行为会让应用多一次 tailwindcss postcss 插件的转换（因为 tailwind 本身的 css 是通过 sidecar 又进行了一次生成的），虽然可以解 @apply 函数的问题，但是会增加应用运行编译成本。

另外，现在不推荐使用 umi 中内置的 tailwindcss: {} 功能，转而自行配置 postcss 插件来开启 tailwind ，因为 umi 中内置的 tailwind 插件太老了，存在一些问题（ #11401 (comment) ），如果自行配置 postcss 插件来使用 tailwind ，则 @apply 也是可以使用的，但不会多一次 tailwind 转换成本。

所以此 PR 的改动只是亡羊补牢，实际上允许用户编写 “不推荐的”、“失败的设计” 的代码，同时增加了用户的编译时间成本，我认为应该 revert 。

[xiekw2010]

我们现在的情况是要对老历史项目进行改造，老项目有些 less 对 :gobal 的 antd 样式进行定制，比如:

.mainTable {
    margin-top: 16px;
    :global {
      .ant-table-tbody .ant-table-cell {
        padding: 0 8px !important;
      }
    }
  }

这种情况下还是直接在 less 里替换 design token 成本更低，所以还是需要 @apply 函数的...

.mainTable {
  @apply mt-4;

  :global {
    .ant-table-tbody .ant-table-cell {
    @apply !px-0 !py-2;
    }
  }
}

umi 作为框架，是否使用 @apply 来开发 tailwind 应该至少要提供选项给开发者，没有完美的写法，但至少对项目来说收敛了 design token。

[fz6m]

这种情况自己给项目按照 tailwind 官方文档使用 postcss 插件的方式安装和配置 tailwind 就可以了，没必要使用 umi 自带的 tailwind 插件，因为如上文所述，umi 内置的 tailwind 插件已经很老了，是最早的时候采用 sidecar 方式生成 tailwind css ，而现在 tailwind 已经支持 postcss 的方式使用，任何 webpack 项目都可以自行修改配置开启使用 tailwind ，而和 umi 无关。

[PeachScript]

@xiekw2010 感谢贡献，我们讨论了一下还是对该变更做了 revert；对于你目前遇到的问题，可以在最佳实践和最小改动间根据实际情况选择：

1. [最佳实践] 如同 @fz6m 所说不用 Umi 的 tailwindcss 插件而是用官方的方案，但可能有少量改造成本
2. [最小改动] 在项目配置里加上 postcss 插件，会有多余的构建消耗但可能没有改造成本

对于 Umi tailwindcss 功能不支持 @apply 这个原始问题，我看 @fz6m 已聚合到 #11403 跟进