Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix .less file using tailwind @apply not working #12031

Merged
merged 2 commits into from
Jan 5, 2024
Merged

fix .less file using tailwind @apply not working #12031

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d305369
fix: when using tailwind compatible with less, it needs config postcss
xiekw2010 Jan 5, 2024
fc5470b
feat: adopt existed post css plugin
xiekw2010 Jan 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/preset-umi/src/commands/generators/tailwindcss.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ export default (api: IApi) => {
});

h.setUmirc('tailwindcss', {});
const existingPlugins = api.config?.extraPostCSSPlugins || [];
h.setUmirc('extraPostCSSPlugins', ['tailwindcss', ...existingPlugins]);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

现在的情况是 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 。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我们现在的情况是要对老历史项目进行改造，老项目有些 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。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

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

h.appendInternalPlugin('@umijs/plugins/dist/tailwindcss');
logger.info('Update .umirc.ts');

Expand Down
Loading