mksafi
2022 年5 月 17 日 17:24
1
起初，我以为我必须替换整个模板才能将 Tailwind 的实用程序类添加到 HTML 中。有人告诉我， wholesale 替换 Discourse 模板是个坏主意。幸运的是，Tailwind 还允许你将 CSS 应用于任意类名。
类似以下内容是可能的……
@layer components {
.d-header {
@apply bg-blue-100;
}
#main-outlet.wrap {
@apply bg-yellow-200;
}
}
……这是个好消息。所以我使用 discourse_theme CLI 设置了一个新主题。我创建了一个 tailwind-input.css 文件，并让 Tailwind 使用该文件生成 common/common.scss。
但之后 Sass 抱怨了。它说：
✘ Error in common scss: Error: Function rgb is missing argument $green.
on line 477 of common.scss
>> background-color: rgb(239 246 255 / var(--tw-bg-opacity));
显然，你不应该 将 Tailwind 生成的 CSS 放入 Sass 文件中 。推荐的解决方案是在你的 Rails 应用中配置这个：
config.assets.css_compressor = nil
我不知道 Rails 或 Discourse 的后端是如何配置的，而且我使用的是托管服务，所以我不知道这对我是不是一个可行的解决方案。
所以我继续寻找另一个解决方案，并发现我可以告诉 Tailwind 不要使用那个有问题的 rgb 语法 。
所以这就是我目前的选择，目前似乎有效……但这感觉更像是一个临时解决方案，而不是一个 proper solution……
一个好的解决方案是为 Discourse 主题提供一个普通的 CSS 文件，比如 common.css 而不是 common.scss。我试过了，但 Discourse 忽略了我的 CSS 文件。
是否可以告诉 Discourse 使用该 CSS 文件来代替 Sass 文件？或者是否有其他好的解决方案来解决这个问题？
abk
2023 年1 月 19 日 10:51
2
置顶此话题。我们正在使用 Tailwind 来确保多个网站之间的一致性。我同意 @mksafi 的观点，理想的解决方案是将生成的 CSS 包含在 Discourse 主题中。
我们如何包含绕过预处理的纯 CSS？
谢谢，
abk
2023 年2 月 16 日 18:29
3
我所采用的方法可以在此存储库中找到：GitHub - neo4j-contrib/discourse-theme-neo4j
与 Tailwind 相关的要点：
一个单独的 NPM 目标使用 postcss 构建 tailwind："tailwind:dev": "postcss tailwind/global.scss -o assets/tailwind.css
CSS 输出放置在 assets 中，以便与主题一起包含。请注意，about.json 包含资产位置。
Discourse SCSS _不_直接引用此生成的 CSS
相反，有一个位于 javascripts/discourse/initializers/tailwind-init.js.es6 的 javascript 初始化程序，它将资产附加到 discourse-assets-stylesheets 元素的末尾，作为一个新的 link 元素
重要提示：Tailwind 的 preflight 在 tailwind.config.js 中被禁用，因为它会重置所有前面的 CSS。相反，我想添加 Tailwind 类并依赖 Discourse 自己的 preflight。
虽然不优雅，但对我们来说是有效的。供您参考。
此致，
这很有趣。我想知道当你在 Discourse 已经声明的 scss 文件之上添加 Tailwind 类时，会得到什么样的视觉效果。
你是通过检查器逐行查看并重新设计核心的许多元素以使用 Tailwind 类吗？
你只将它用于新 的添加项，如主题组件或插件吗？
我很想看到一个实际的现场示例。
abk
2023 年2 月 16 日 21:31
5
我们已经开始在整个组织中采用 Tailwind，从网站到应用程序——因此最初的目标是使用 Tailwind 从通用定义应用品牌颜色和字体。然后，我们将使用它来制作自定义组件，例如标题、导航和英雄部分。这是我开始进行的工作，现在又重新拾起来了。
此主题已在我们的网站上上线，示例帖子位于 Neo4j Discourse 2021 Theme - General - Neo4j Online Community
如果大家感兴趣，我们会发布更多雄心勃勃的更新。
我在这里寻求意见，因为我们想将 Discourse 的默认主题更改为 Tailwind CSS。我不是一个硬核开发者，所以我试图了解完成这项工作需要什么，包括将 Tailwind 集成到 Discourse 实例以及根据我们的需求进行自定义。我们有自己的开发人员，可以根据需要自定义 Tailwind CSS，但他不熟悉将其集成到 Discourse 中。此外，我们未能找到 Discourse 默认主题使用的所有 HTML，并且也假设这将是我们自定义的起点。任何关于如何处理此事的提示或指导都将不胜感激。感谢您的帮助和支持。
