Inicialmente, pensei que teria que substituir modelos inteiros para adicionar as classes de utilitário do Tailwind ao HTML. Substituir modelos do Discourse por completo é uma má ideia, fui informado. Felizmente, o Tailwind também permite aplicar seu CSS a nomes de classe arbitrários.
Algo como o seguinte é possível…
@layer components {
.d-header {
@apply bg-blue-100;
}
#main-outlet.wrap {
@apply bg-yellow-200;
}
}
…o que é uma boa notícia. Então, configurei um novo tema usando a CLI discourse_theme. Criei um arquivo tailwind-input.css e pedi ao Tailwind para consumi-lo e gerar um common/common.scss a partir dele.
Mas então o Sass reclamou. Ele disse
✘ Error in common scss: Error: Function rgb está faltando o argumento $green.
on line 477 of common.scss
>> background-color: rgb(239 246 255 / var(--tw-bg-opacity));
Aparentemente, você não deve alimentar CSS gerado pelo Tailwind em um arquivo Sass. A solução recomendada é configurar seu aplicativo Rails com isso
config.assets.css_compressor = nil
Eu não conheço Rails nem como o backend do Discourse é configurado, e estou em hospedagem gerenciada, então não sei se essa é uma solução viável para mim.
Então continuei procurando outra solução e descobri que poderia dizer ao Tailwind para não usar essa sintaxe rgb problemática.
Então foi com isso que fiquei por enquanto, e as coisas parecem funcionar até agora… mas isso parece mais uma solução temporária do que uma solução adequada…
Uma boa solução seria fornecer ao tema do Discourse um arquivo CSS simples, como common.css em vez de common.scss. Tentei isso, mas o Discourse ignorou meu arquivo CSS.
É possível dizer ao Discourse para usar esse arquivo CSS em vez do arquivo Sass? Ou existe outra boa solução para este problema?
