如何让tailwindcss和scss协同工作？

Question

我试图让 tailwindcss 和 scss 一起工作，但我遇到了一些问题。我尝试了 2 个选项

1 - rails new app_name -c tailwind- 工作正常，但我不能使用嵌套选择器，例如

p {
  h1.name {
     @apply text-9xl;
  }
}

2 - rails new app_name -c postcss- 工作得很好，我可以在我的 postcss 配置中使用嵌套选择器

p {
  h1.name {
     @apply text-9xl;
  }
}

但我不能在 taiwindcss 代码中使用 @import 语句（基本 CSS 代码工作正常）。

应用程序.scss

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('tailwindcss/nesting'),
    require('autoprefixer')
  ]
}

外部.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "external";

在此示例中，读取了正文，但 text-9xl 未应用于 h1。如何修复它？

PS：我在 Rails 7.0.1 上使用 ruby​​ 和 cssbundling-rails gem

Answer 1

一周前在本期讨论过。 \n目前如果同时需要 Tailwind 和 PostCSS，

\n

\n

那么你需要整个 Node 辣酱玉米饼馅

\n

\n

正如 DHH 在讨论中所述。或者，您可以使用这一技巧，该技巧基于将所有 css 文件合并为一个额外的预编译步骤。

\n

或者，你可以等到这一步进入tailwindcss-railsgem。

\n

还值得注意的是，@apply不建议在顺风中用于一般用途。正如文档中所述：

\n

\n

无论你做什么，不要\xe2\x80\x99t@apply只是为了让事情看起来\xe2\x80\x9ccleaner\xe2\x80\x9d。是的，充斥着 Tailwind 类的 HTML 模板有点丑陋。在具有大量自定义 CSS 的项目中进行更改会更糟糕。\n如果您开始使用@apply所有内容，则基本上只是\n再次编写 CSS 并丢弃所有工作流程和\nTailwind 为您提供的可维护性优势，例如：

\n

\n

也许，实际上并没有必要仅仅为了……而使用所有这些技巧@apply。

\n