Сначала я думал, что мне придётся заменять целые шаблоны, чтобы добавить утилитарные классы Tailwind в HTML. Мне сообщили, что полная замена шаблонов Discourse — плохая идея. К счастью, Tailwind также позволяет применять свои стили CSS к произвольным именам классов.
Например, возможно следующее…
@layer components {
.d-header {
@apply bg-blue-100;
}
#main-outlet.wrap {
@apply bg-yellow-200;
}
}
…что является хорошей новостью. Поэтому я создал новую тему, используя CLI discourse_theme. Я создал файл tailwind-input.css и попросил Tailwind обработать его и сгенерировать на его основе файл common/common.scss.
Однако Sass выдал ошибку. Он сообщил:
✘ 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));
Оказывается, не следует передавать сгенерированный Tailwind CSS в файл Sass. Рекомендуемое решение — настроить ваше Rails-приложение следующим образом:
config.assets.css_compressor = nil
Я не знаком с Rails и тем, как настроен бэкенд Discourse, к тому же я использую управляемый хостинг, поэтому не знаю, применимо ли это решение в моём случае.
Поэтому я продолжил поиски другого решения и узнал, что можно настроить Tailwind так, чтобы он не использовал проблемный синтаксис rgb.
Именно это я пока и применил, и пока всё работает… но это кажется скорее временным обходным путём, чем полноценным решением…
Хорошим решением было бы предоставить тему Discourse с обычным CSS-файлом, например common.css, вместо common.scss. Я попробовал это сделать, но Discourse проигнорировал мой CSS-файл.
Возможно ли указать Discourse использовать этот CSS-файл вместо файла Sass? Или есть другое хорошее решение этой проблемы?
