Come usare Tailwind per tematizzare Discourse

Sviluppatore
1

Inizialmente pensavo che avrei dovuto sostituire interi template per aggiungere le classi di utilità di Tailwind all’HTML. Sostituire completamente i template di Discourse è una cattiva idea, mi è stato detto. Fortunatamente, Tailwind ti permette anche di applicare il suo CSS a nomi di classe arbitrari.

Qualcosa di simile a quanto segue è possibile…

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

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

…il che è una buona notizia. Quindi ho impostato un nuovo tema usando la CLI discourse_theme. Ho creato un file tailwind-input.css e ho chiesto a Tailwind di consumarlo e generare da esso un common/common.scss.

Ma poi Sass si è lamentato. Ha detto

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

A quanto pare, non si dovrebbe inserire CSS generato da Tailwind in un file Sass. La soluzione consigliata è configurare la tua app Rails con questo

config.assets.css_compressor = nil

Non conosco Rails né come è configurato il backend di Discourse, e sono su hosting gestito, quindi non so se questa sia una soluzione fattibile per me.

Quindi ho continuato a cercare un’altra soluzione, e ho scoperto che potevo dire a Tailwind di non usare quella sintassi rgb problematica.

Quindi è quello che ho fatto per ora, e le cose sembrano funzionare finora… ma questo sembra più una soluzione temporanea che una soluzione adeguata…

Una buona soluzione sarebbe fornire al tema Discourse un semplice file CSS, come common.css invece di common.scss. Ho provato, ma Discourse ha ignorato il mio file CSS.

È possibile dire a Discourse di usare quel file CSS al posto del file Sass? O esiste un’altra buona soluzione a questo problema?

7 Mi Piace
2

Riportando questo argomento in cima. Stiamo usando Tailwind per la coerenza tra più siti web. Concordo con @mksafi sul fatto che la soluzione ideale sarebbe includere il CSS generato con il tema di discourse.

Come possiamo includere CSS semplice che bypassi il pre-processing?

Grazie,
Andreas

6 Mi Piace
3

L’approccio che ho adottato si trova in questo repository: GitHub - neo4j-contrib/discourse-theme-neo4j

I punti essenziali relativi a Tailwind:

  • Un target NPM separato compila Tailwind usando postcss: \"tailwind:dev\": \"postcss tailwind/global.scss -o assets/tailwind.css
  • L’output CSS viene inserito in assets per essere incluso con il tema. Si noti che about.json include la posizione dell’asset.
  • L’SCSS di Discourse non fa riferimento diretto a questo CSS prodotto
  • Invece, c’è un inizializzatore javascript in javascripts/discourse/initializers/tailwind-init.js.es6 che aggiunge l’asset alla fine dell’elemento discourse-assets-stylesheets come un nuovo elemento link
  • Importante: il preflight di Tailwind è disabilitato in tailwind.config.js, perché altrimenti reimposterebbe tutto il CSS precedente. Invece, voglio aggiungere le classi Tailwind e fare affidamento sul preflight di Discourse.

Non è elegante, ma funziona per noi. Usalo per tua ispirazione. :slight_smile:

Saluti,
Andreas

4 Mi Piace
4

Questo è intrigante. Sono curioso di sapere che tipo di risultati visivi si ottengono abbinando classi tailwind a ciò che Discourse ha già dichiarato nei suoi file scss.

Stai andando riga per riga nell’ispettore e rielaborando molti elementi principali per utilizzare le classi tailwind?

Stai usando questo solo per nuove aggiunte come componenti tematici o plugin?

Mi piacerebbe vedere un esempio dal vivo di questo in azione.

4 Mi Piace
5

Abbiamo iniziato ad adottare Tailwind in tutta la nostra organizzazione, dai siti web alle app, quindi l’obiettivo iniziale è utilizzare Tailwind per applicare colori e font del brand da una definizione comune. Lo utilizzeremo quindi per componenti personalizzati come header, navigazione ed eroi. Questo è un lavoro che avevo iniziato e che sto riprendendo proprio ora.

Questo tema è attivo sul nostro sito, con un post di esempio su Neo4j Discourse 2021 Theme - General - Neo4j Online Community

Se è interessante, pubblicherò aggiornamenti man mano che diventeremo più ambiziosi.

7 Mi Piace
7

Ciao @abk,

Siamo decisamente interessati. Curiosi di sapere come sei progredito :slight_smile:

2 Mi Piace
8

Sto cercando un parere qui poiché vorremmo cambiare il tema predefinito di Discourse in Tailwind CSS. Non sono uno sviluppatore esperto, quindi sto cercando di capire cosa serve per farlo, inclusa l’integrazione di Tailwind nell’istanza di Discourse e la personalizzazione secondo le nostre esigenze. Abbiamo un nostro sviluppatore che può personalizzare Tailwind CSS secondo necessità, ma non ha familiarità con la sua integrazione in Discourse. Inoltre, non siamo riusciti a trovare tutto l’HTML utilizzato per il tema predefinito di Discourse, e presumiamo anche che quello sarebbe il nostro punto di partenza per la personalizzazione. Qualsiasi suggerimento o guida su come affrontare questo problema sarebbe molto apprezzato. Grazie per il vostro aiuto e supporto.

1 Mi Piace