如何使用 Tailwind 为 Discourse 设定主题

开发
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 文件？或者是否有其他好的解决方案来解决这个问题？

7 个赞
2

置顶此话题。我们正在使用 Tailwind 来确保多个网站之间的一致性。我同意 @mksafi 的观点，理想的解决方案是将生成的 CSS 包含在 Discourse 主题中。

我们如何包含绕过预处理的纯 CSS？

谢谢，
Andreas

6 个赞
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。

虽然不优雅，但对我们来说是有效的。供您参考。:slight_smile:

此致，
Andreas

4 个赞
4

这很有趣。我想知道当你在 Discourse 已经声明的 scss 文件之上添加 Tailwind 类时，会得到什么样的视觉效果。

你是通过检查器逐行查看并重新设计核心的许多元素以使用 Tailwind 类吗？

你只将它用于新的添加项，如主题组件或插件吗？

我很想看到一个实际的现场示例。

4 个赞
5

我们已经开始在整个组织中采用 Tailwind，从网站到应用程序——因此最初的目标是使用 Tailwind 从通用定义应用品牌颜色和字体。然后，我们将使用它来制作自定义组件，例如标题、导航和英雄部分。这是我开始进行的工作，现在又重新拾起来了。

此主题已在我们的网站上上线，示例帖子位于 Neo4j Discourse 2021 Theme - General - Neo4j Online Community

如果大家感兴趣，我们会发布更多雄心勃勃的更新。

7 个赞
7

您好 @abk，

我们非常有兴趣。很想知道您进展如何 :slight_smile:

2 个赞
8

我在这里寻求意见，因为我们想将 Discourse 的默认主题更改为 Tailwind CSS。我不是一个硬核开发者，所以我试图了解完成这项工作需要什么，包括将 Tailwind 集成到 Discourse 实例以及根据我们的需求进行自定义。我们有自己的开发人员，可以根据需要自定义 Tailwind CSS，但他不熟悉将其集成到 Discourse 中。此外，我们未能找到 Discourse 默认主题使用的所有 HTML，并且也假设这将是我们自定义的起点。任何关于如何处理此事的提示或指导都将不胜感激。感谢您的帮助和支持。

1 个赞