Discourseのテーマ設定にTailwindを使う方法

開発
1

当初は、Tailwind のユーティリティクラスを HTML に追加するために、テンプレート全体を置き換える必要があると思っていました。しかし、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 構文を使用しないように指示できることを発見しました。

今回はそれで進めることにし、今のところはうまくいっているようです…しかし、これは適切な解決策というよりは、一時的な回避策のように感じます…

良い解決策は、Discourse テーマに common.scss の代わりにプレーンな CSS ファイル、例えば common.css を提供することです。試してみましたが、Discourse は私の CSS ファイルを無視しました。

Discourse に、Sass ファイルの代わりにその CSS ファイルを使用するように指示することは可能でしょうか？あるいは、この問題に対する別の良い解決策はありますか？

「いいね！」 7
2

このトピックを再度上げます。私たちは、複数のウェブサイト間で一貫性を保つためにTailwindを使用しています。@mksafi氏が提案したように、生成されたCSSをDiscourseテーマに含めるのが理想的だと思います。

プリプロセスをバイパスして、プレーンなCSSを含めるにはどうすればよいでしょうか？

よろしくお願いします。
Andreas

「いいね！」 6
3

このリポジトリで採用したアプローチを確認できます: GitHub - neo4j-contrib/discourse-theme-neo4j

Tailwindに関する要点は以下の通りです:

  • PostCSSを使用してTailwindをビルドする個別のNPMターゲットがあります: \"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イニシャライザがあり、新しいlink要素としてdiscourse-assets-stylesheets要素の末尾にアセットを追加します。
  • 重要: Tailwindのプリフライトはtailwind.config.jsで無効になっています。これは、それ以前のすべてのCSSをリセットしてしまうためです。代わりに、Tailwindクラスを追加し、Discourse独自のプリフライトに依存させたいと考えています。

エレガントではありませんが、私たちにとっては機能します。ご自身の参考にしてください。:slight_smile:

敬具、
Andreas

「いいね！」 4
4

これは興味深いですね。Discourse がすでに scss ファイルで宣言しているものの上に Tailwind クラスを適用した場合、どのような視覚的な結果が得られるのか興味があります。

インスペクターで一行ずつ確認し、コアの多くの要素を Tailwind クラスを使用するように再スタイル設定していますか？

テーマコンポーネントやプラグインのような 新しい 追加部分にのみ使用していますか？

実際に動作しているライブ例を見てみたいです。

「いいね！」 4
5

組織全体でウェブサイトからアプリまでTailwindを採用し始めたため、最初の目標は、共通の定義からブランドカラーとフォントを適用するためにTailwindを使用することです。次に、ヘッダー、ナビゲーション、ヒーローなどのカスタムコンポーネントに使用します。これは私が始めた仕事で、今また再開したところです。

このテーマは私たちのサイトで公開されており、サンプル投稿はhttps://community.neo4j.com/t/neo4j-discourse-2021-theme/31845にあります。

興味があれば、より意欲的な取り組みを進めるにつれて、アップデートを投稿します。

「いいね！」 7
7

@abk様

ぜひ前向きに検討させていただきます。進捗状況をお聞かせいただけますと幸いです :slight_smile:

「いいね！」 2
8

Discourse のデフォルトテーマを Tailwind CSS に変更したいと考えており、ここでご意見を伺いたいと思います。私は熱心な開発者ではないため、これを実現するために必要なこと、特に Tailwind を Discourse インスタンスに統合し、ニーズに合わせてカスタマイズすることについて理解しようとしています。独自の開発者が Tailwind CSS を必要に応じてカスタマイズできますが、Discourse への統合には慣れていません。さらに、Discourse のデフォルトテーマに使用されているすべての HTML を見つけることができませんでした。また、カスタマイズの出発点としてそれらを使用することを想定しています。この件をどのように進めていくかについてのポインターやガイダンスがあれば、大変感謝いたします。ご協力とサポートをよろしくお願いいたします。

「いいね！」 1