Wie man Tailwind benutzt, um Discourse zu thematisieren

Entwickler
1

Anfangs dachte ich, ich müsste ganze Vorlagen ersetzen, um Tailwinds Utility-Klassen zu HTML hinzuzufügen. Das Ersetzen von Discourse-Vorlagen im Ganzen ist eine schlechte Idee, wie mir mitgeteilt wurde. Glücklicherweise erlaubt Tailwind auch, sein CSS auf beliebige Klassennamen anzuwenden.

Etwas wie das Folgende ist möglich…

@layer components {
  .d-header {
    @apply bg-blue-100;
  }

  #main-outlet.wrap {
    @apply bg-yellow-200;
  }
}

…was eine gute Nachricht ist. Also habe ich ein neues Theme mit dem discourse_theme CLI eingerichtet. Ich habe eine tailwind-input.css-Datei erstellt und Tailwind gebeten, diese zu verarbeiten und daraus eine common/common.scss zu generieren.

Aber dann beschwerte sich Sass. Es sagte:

✘ Error in common scss: Error: Function rgb fehlt das Argument $green.
        on line 477 of common.scss
>>   background-color: rgb(239 246 255 / var(--tw-bg-opacity));

Anscheinend soll man generiertes CSS von Tailwind nicht in eine Sass-Datei einspeisen. Die empfohlene Lösung ist, Ihre Rails-App mit Folgendem zu konfigurieren:

config.assets.css_compressor = nil

Ich kenne mich nicht mit Rails aus oder wie das Backend von Discourse konfiguriert ist, und ich bin bei einem Managed-Hosting, daher weiß ich nicht, ob das eine praktikable Lösung für mich ist.

Also suchte ich weiter nach einer anderen Lösung und fand heraus, dass ich Tailwind anweisen kann, diese problematische rgb-Syntax nicht zu verwenden.

Also habe ich mich vorerst dafür entschieden, und die Dinge scheinen bisher zu funktionieren… aber das fühlt sich eher wie eine temporäre Lösung als eine richtige an…

Eine gute Lösung wäre, dem Discourse-Theme eine normale CSS-Datei, wie common.css, anstelle von common.scss zur Verfügung zu stellen. Ich habe das versucht, aber Discourse hat meine CSS-Datei ignoriert.

Ist es möglich, Discourse anzuweisen, diese CSS-Datei anstelle der Sass-Datei zu verwenden? Oder gibt es eine andere gute Lösung für dieses Problem?

7 „Gefällt mir“
2

Diesen Thread pushen. Wir verwenden Tailwind für Konsistenz über mehrere Websites hinweg. Ich stimme @mksafi zu, dass die ideale Lösung darin bestünde, das generierte CSS in das Discourse-Theme einzubinden.

Wie können wir reines CSS einbinden, das die Vorverarbeitung umgeht?

Danke,
Andreas

6 „Gefällt mir“
3

Der Ansatz, den ich gewählt habe, ist in diesem Repository zu finden: GitHub - neo4j-contrib/discourse-theme-neo4j

Die wesentlichen Punkte in Bezug auf Tailwind:

  • Ein separater NPM-Zielprozess baut Tailwind mit postcss: \"tailwind:dev\": \"postcss tailwind/global.scss -o assets/tailwind.css
  • Die CSS-Ausgabe wird im Verzeichnis assets platziert, um sie mit dem Theme zu integrieren. Beachten Sie, dass about.json den Speicherort der Assets enthält.
  • Das Discourse SCSS verweist nicht direkt auf dieses erzeugte CSS.
  • Stattdessen gibt es einen JavaScript-Initialisierer unter javascripts/discourse/initializers/tailwind-init.js.es6, der das Asset am Ende des Elements discourse-assets-stylesheets als neues link-Element anhängt.
  • Wichtig: Der Tailwind-Preflight ist in der tailwind.config.js deaktiviert, da er sonst das gesamte vorhergehende CSS zurücksetzen würde. Stattdessen möchte ich die Tailwind-Klassen hinzufügen und mich auf den eigenen Preflight von Discourse verlassen.

Nicht elegant, aber es funktioniert für uns. Nutzen Sie es als Inspiration. :slight_smile:

Viele Grüße,
Andreas

4 „Gefällt mir“
4

Das ist faszinierend. Ich bin neugierig, welche Art von visuellen Ergebnissen Sie erzielen, wenn Sie Tailwind-Klassen mit dem kombinieren, was Discourse bereits in seinen scss-Dateien deklariert hat.

Gehen Sie die Elemente im Inspektor Zeile für Zeile durch und gestalten Sie viele Kernbestandteile neu, um Tailwind-Klassen zu verwenden?

Verwenden Sie dies nur für neue Ergänzungen wie Theme-Komponenten oder Plugins?

Ich würde gerne ein Live-Beispiel davon in Aktion sehen.

4 „Gefällt mir“
5

Wir haben begonnen, Tailwind in unserem gesamten Unternehmen zu nutzen – von Websites bis hin zu Apps. Das anfängliche Ziel ist es, Tailwind zu verwenden, um Markenfarben und -schriftarten aus einer gemeinsamen Definition anzuwenden. Anschließend werden wir es für benutzerdefinierte Komponenten wie Header, Navigation und Hero-Bereiche verwenden. Dies ist eine Arbeit, mit der ich begonnen hatte und die ich gerade wieder aufgreife.

Dieses Theme ist auf unserer Website live, mit einem Beispielbeitrag unter Neo4j Discourse 2021 Theme - General - Neo4j Online Community

Wenn es interessant ist, werde ich Updates posten, wenn wir ehrgeiziger werden.

7 „Gefällt mir“
7

Hallo @abk,

Wir sind definitiv interessiert. Wir sind gespannt, wie Sie vorangekommen sind :slight_smile:

2 „Gefällt mir“
8

Ich suche hier nach Input, da wir das Standardthema von Discourse auf Tailwind CSS umstellen möchten. Ich bin kein Hardcore-Entwickler und versuche daher zu verstehen, was dazu gehört, einschließlich der Integration von Tailwind in eine Discourse-Instanz und der Anpassung nach unseren Bedürfnissen. Wir haben unseren eigenen Entwickler, der Tailwind CSS nach Bedarf anpassen kann, aber er ist nicht mit der Integration in Discourse vertraut. Außerdem konnten wir nicht alle HTML-Elemente finden, die für das Standardthema von Discourse verwendet werden, und gehen davon aus, dass dies unser Ausgangspunkt für die Anpassung sein wird. Jeder Hinweis oder jede Anleitung, wie wir hier vorgehen können, wäre sehr willkommen. Vielen Dank für Ihre Hilfe und Unterstützung.

1 „Gefällt mir“