Comment utiliser Tailwind pour thématiser Discourse

Dev
1

Au début, j’ai pensé que je devrais remplacer des modèles entiers pour ajouter les classes utilitaires de Tailwind au HTML. Remplacer les modèles Discourse en bloc est une mauvaise idée, m’a-t-on informé. Heureusement, Tailwind vous permet également d’appliquer son CSS à des noms de classes arbitraires.

Quelque chose comme ce qui suit est possible…

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

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

… ce qui est une bonne nouvelle. J’ai donc configuré un nouveau thème en utilisant l’outil CLI discourse_theme. J’ai créé un fichier tailwind-input.css et j’ai demandé à Tailwind de le consommer et de générer à partir de celui-ci un fichier common/common.scss.

Mais ensuite, Sass s’est plaint. Il a dit

✘ 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));

Apparemment, on n’est pas censé fournir du CSS généré par Tailwind à un fichier Sass. La solution recommandée est de configurer votre application Rails avec ceci

config.assets.css_compressor = nil

Je ne connais pas Rails ni la configuration du backend de Discourse, et je suis sur un hébergement géré, donc je ne sais pas si c’est une solution réalisable pour moi.

J’ai donc continué à chercher une autre solution, et j’ai découvert que je pouvais dire à Tailwind de ne pas utiliser cette syntaxe rgb problématique.

C’est donc ce que j’ai fait pour l’instant, et les choses semblent fonctionner… mais cela ressemble plus à une solution de contournement temporaire qu’à une solution appropriée…

Une bonne solution serait de fournir au thème Discourse un fichier CSS ordinaire, comme common.css au lieu de common.scss. J’ai essayé, mais Discourse a ignoré mon fichier CSS.

Est-il possible de dire à Discourse d’utiliser ce fichier CSS à la place du fichier Sass ? Ou existe-t-il une autre bonne solution à ce problème ?

7 « J'aime »
2

Remontée de ce sujet. Nous utilisons Tailwind pour la cohérence sur plusieurs sites Web. Je suis d’accord avec @mksafi sur le fait que la solution idéale serait d’inclure le CSS généré avec le thème Discourse.

Comment pouvons-nous inclure du CSS brut qui contourne le prétraitement ?

Merci,
Andreas

6 « J'aime »
3

L’approche que j’ai adoptée se trouve dans ce dépôt : GitHub - neo4j-contrib/discourse-theme-neo4j

Les points essentiels concernant Tailwind :

  • Une cible NPM distincte compile Tailwind à l’aide de postcss : « tailwind:dev »: « postcss tailwind/global.scss -o assets/tailwind.css »
  • La sortie CSS est placée dans assets pour être incluse avec le thème. Notez que about.json inclut l’emplacement de l’actif.
  • Le SCSS de Discourse ne référence pas directement ce CSS produit.
  • Au lieu de cela, il y a un initialiseur javascript à javascripts/discourse/initializers/tailwind-init.js.es6 qui ajoute l’actif à la fin de l’élément discourse-assets-stylesheets sous forme de nouvel élément link.
  • Important : le pré-vol Tailwind est désactivé dans tailwind.config.js, car il réinitialiserait sinon tout le CSS précédent. Au lieu de cela, je veux ajouter les classes Tailwind et m’appuyer sur le propre pré-vol de Discourse.

Pas élégant, mais cela fonctionne pour nous. Utilisez-le pour votre propre inspiration. :slight_smile:

Cordialement,
Andreas

4 « J'aime »
4

C’est intriguant. Je suis curieux de savoir quels types de résultats visuels vous obtenez en associant des classes Tailwind par-dessus ce que Discourse a déjà déclaré dans ses fichiers scss.

Parcourez-vous ligne par ligne dans l’inspecteur et re-stylisez-vous de nombreux éléments du cœur pour utiliser des classes Tailwind ?

Utilisez-vous cela uniquement pour les nouveaux ajouts tels que les composants thématiques ou les plugins ?

J’adorerais voir un exemple concret en action.

4 « J'aime »
5

Nous avons commencé à adopter Tailwind dans toute notre organisation, des sites web aux applications. L’objectif initial est donc d’utiliser Tailwind pour appliquer les couleurs et les polices de la marque à partir d’une définition commune. Nous l’utiliserons ensuite pour des composants personnalisés tels que les en-têtes, la navigation et les héros. C’est un travail que j’avais commencé et que je reprends maintenant.

Ce thème est en ligne sur notre site, avec un exemple de publication sur Neo4j Discourse 2021 Theme - General - Neo4j Online Community

Si cela vous intéresse, je publierai des mises à jour à mesure que nous deviendrons plus ambitieux.

7 « J'aime »
7

Salut @abk,

Nous sommes définitivement intéressés. J’ai hâte de savoir comment vous avez progressé :slight_smile:

2 « J'aime »
8

Je sollicite votre avis car nous souhaitons changer le thème par défaut de Discourse pour Tailwind CSS. Je ne suis pas un développeur chevronné, j’essaie donc de comprendre ce qu’il faut faire pour y parvenir, y compris l’intégration de Tailwind à une instance Discourse et la personnalisation selon nos besoins. Nous avons notre propre développeur qui peut personnaliser Tailwind CSS au besoin, mais il n’est pas familier avec son intégration à Discourse. De plus, nous n’avons pas réussi à trouver tout le HTML utilisé pour le thème par défaut de Discourse, et nous supposons que ce serait notre point de départ pour la personnalisation. Tous les conseils ou orientations sur la manière de naviguer dans ce processus seraient grandement appréciés. Merci de votre aide et de votre soutien.

1 « J'aime »