带有 postcss 和 css 模块的 Tailwindcss

Posted 2023-03-06

【中文标题】带有 postcss 和 css 模块的 Tailwindcss

【英文标题】：Tailwindcss with postcss and css modules

【发布时间】：2021-06-17 16:42:43

【问题描述】：

我认为 Tailwind CSS 与 CSS 模块/post css 可以很好地协同工作。编写更少的代码并生成更少的 CSS 但是......

当我将 tailwind 与 @apply 一起使用时，它只是将样式应用于该类

例子

.root 
  @apply flex align-center;

从 styles.root 到 "root flex align-center" 但它只是将 css 添加到 .root 类

我认为它应该像composes: flex align-center from global;一样工作

是我的配置错误还是只是这样工作？

【参考方案1】：

这就是@apply directive 的工作原理。 @apply 用于将任何现有的实用程序类内联到您自己的自定义 CSS 中。

/* Input */
.root 
    @apply flex items-center;


/* Output */
.root 
    display: flex;
    align-items: center;

【讨论】：

是的，我知道，所以没有办法有效地使用顺风？只有来自全球的作曲？

“有效利用顺风”是什么意思？

通过@apply，我们正在添加越来越多的 CSS 而不仅仅是可重用的类，正是您的示例，您只想使用 flex 和 align-center 但它只是添加了代码......

您可以创建自己的实用程序类（如上面的那个），然后重用它们。最终，无论如何，您总会将 Tailwind 类转换为 CSS。

所以我需要从实用程序类创建实用程序类：D 最好的方法应该是作为composes: flex items-center from tailwind 工作，您不想向代码库添加越来越多的 css