Inicialmente pensé que tendría que reemplazar plantillas enteras para agregar las clases de utilidad de Tailwind al HTML. Me informaron que reemplazar las plantillas de Discourse por completo es una mala idea. Afortunadamente, Tailwind también te permite aplicar su CSS a nombres de clase arbitrarios.
Algo como lo siguiente es posible…
@layer components {
.d-header {
@apply bg-blue-100;
}
#main-outlet.wrap {
@apply bg-yellow-200;
}
}
…lo cual es una buena noticia. Así que configuré un nuevo tema usando la CLI discourse_theme. Creé un archivo tailwind-input.css y le pedí a Tailwind que lo consumiera y generara un common/common.scss a partir de él.
Pero entonces Sass se quejó. Dijo
✘ Error in common scss: Error: A la función rgb le falta el argumento $green.
en la línea 477 de common.scss
> background-color: rgb(239 246 255 / var(--tw-bg-opacity));
Aparentemente, no se debe alimentar CSS generado por Tailwind a un archivo Sass. La solución recomendada es configurar tu aplicación Rails con esto
config.assets.css_compressor = nil
No sé de Rails ni cómo está configurado el backend de Discourse, y estoy en un hosting administrado, así que no sé si esa es una solución factible para mí.
Así que seguí buscando otra solución, y descubrí que podía decirle a Tailwind que no usara esa sintaxis rgb problemática.
Así que eso es lo que elegí por ahora, y las cosas parecen funcionar hasta ahora… pero esto se siente más como una solución temporal que una solución adecuada…
Una buena solución sería proporcionar al tema de Discourse un archivo CSS normal, como common.css en lugar de common.scss. Lo intenté, pero Discourse ignoró mi archivo CSS.
¿Es posible decirle a Discourse que use ese archivo CSS en lugar del archivo Sass? ¿O hay otra buena solución para este problema?
