# Как использовать Tailwind для настройки темы Discourse
**URL:** https://meta.discourse.org/t/how-to-use-tailwind-to-theme-discourse/227326
**Category:** Development
**Created:** [17.Май.2022 17:24:18 UTC](https://meta.discourse.org/t/how-to-use-tailwind-to-theme-discourse/227326 "2022-05-17T17:24:18Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@mksafi](https://meta.discourse.org/u/mksafi)
#### Post date: [17.Май.2022 17:24:18 UTC](https://meta.discourse.org/t/how-to-use-tailwind-to-theme-discourse/227326/1 "2022-05-17T17:24:18Z")
Сначала я думал, что мне придётся заменять целые шаблоны, чтобы добавить утилитарные классы Tailwind в HTML. Мне сообщили, что полная замена шаблонов Discourse — плохая идея. К счастью, Tailwind также позволяет применять свои стили CSS к произвольным именам классов.
Например, возможно следующее…
```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 выдал ошибку. Он сообщил:
```plaintext
✘ 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](https://github.com/tailwindlabs/tailwindcss/discussions/6738). Рекомендуемое решение — настроить ваше Rails-приложение следующим образом:
```plaintext
config.assets.css_compressor = nil
```
Я не знаком с Rails и тем, как настроен бэкенд Discourse, к тому же я использую управляемый хостинг, поэтому не знаю, применимо ли это решение в моём случае.
Поэтому я продолжил поиски другого решения и узнал, что можно [настроить Tailwind так, чтобы он не использовал проблемный синтаксис `rgb`](https://stackoverflow.com/questions/70754961/tailwindcss-force-tailwind-to-use-compatible-rgb-syntax).
Именно это я пока и применил, и пока всё работает… но это кажется скорее временным обходным путём, чем полноценным решением…
Хорошим решением было бы предоставить тему Discourse с обычным CSS-файлом, например `common.css`, вместо `common.scss`. Я попробовал это сделать, но Discourse проигнорировал мой CSS-файл.
Возможно ли указать Discourse использовать этот CSS-файл вместо файла Sass? Или есть другое хорошее решение этой проблемы?
---
### Author:  [@abk](https://meta.discourse.org/u/abk)
#### Post date: [19.Январь.2023 10:51:36 UTC](https://meta.discourse.org/t/how-to-use-tailwind-to-theme-discourse/227326/2 "2023-01-19T10:51:36Z")
Поднимаю эту тему. Мы используем Tailwind для обеспечения единообразия на нескольких веб-сайтах. Я согласен с @mksafi, что идеальным решением было бы включить сгенерированный CSS в тему Discourse.
Как можно включить обычный CSS, обходящий предварительную обработку?
Спасибо,
Андреас
---
### Author:  [@abk](https://meta.discourse.org/u/abk)
#### Post date: [16.Февраль.2023 18:29:33 UTC](https://meta.discourse.org/t/how-to-use-tailwind-to-theme-discourse/227326/3 "2023-02-16T18:29:33Z")
Подход, который я использовал, можно найти в этом репозитории: [GitHub - neo4j-contrib/discourse-theme-neo4j · GitHub](https://github.com/neo4j-contrib/discourse-theme-neo4j)
Ключевые моменты, касающиеся Tailwind:
- Отдельная цель NPM собирает Tailwind с помощью postcss: `"tailwind:dev": "postcss tailwind/global.scss -o assets/tailwind.css`
- Результат компиляции CSS размещается в папке `assets` для включения в тему. Обратите внимание, что `about.json` содержит путь к этому ресурсу.
- SCSS-файлы Discourse **не** ссылаются напрямую на этот сгенерированный CSS.
- Вместо этого используется инициализатор JavaScript по адресу `javascripts/discourse/initializers/tailwind-init.js.es6`, который добавляет ресурс в конец элемента `discourse-assets-stylesheets` в виде нового тега `link`.
- Важно: префайл Tailwind отключен в файле `tailwind.config.js`, так как иначе он сбросит все предшествующие стили CSS. Вместо этого я хочу добавлять классы Tailwind и полагаться на собственный префайл Discourse.
Не очень элегантно, но для нас это работает. Используйте это для собственного вдохновения. 🙂
С наилучшими пожеланиями,
Андреас
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [16.Февраль.2023 19:01:39 UTC](https://meta.discourse.org/t/how-to-use-tailwind-to-theme-discourse/227326/4 "2023-02-16T19:01:39Z")
Это интересно. Мне любопытно, какие визуальные результаты получаются при наложении классов Tailwind поверх стилей, которые Discourse уже объявил в своих файлах `scss`.
Вы проходите по каждому элементу в инспекторе и переделываете многие элементы ядра, используя классы Tailwind?
Или вы используете это только для _новых_ элементов, таких как компоненты тем или плагины?
Я бы с удовольствием увидел живой пример этого в действии.
---
### Author:  [@abk](https://meta.discourse.org/u/abk)
#### Post date: [16.Февраль.2023 21:31:07 UTC](https://meta.discourse.org/t/how-to-use-tailwind-to-theme-discourse/227326/5 "2023-02-16T21:31:07Z")
Мы начали внедрять Tailwind во всей организации — от веб-сайтов до приложений — поэтому первоочередная задача — использовать Tailwind для применения цветов и шрифтов бренда на основе единого определения. Затем мы будем использовать его для создания пользовательских компонентов, таких как заголовки, навигация и hero-секции. Это работа, которую я начал ранее, и сейчас я снова к ней вернулся.
Эта тема уже работает на нашем сайте, пример поста доступен по ссылке: [Neo4j Discourse 2021 Theme - General - Neo4j Online Community](https://community.neo4j.com/t/neo4j-discourse-2021-theme/31845)
Если это интересно, я буду публиковать обновления по мере того, как наши планы станут более амбициозными.
---
### Author:  [@SimonBiggs](https://meta.discourse.org/u/SimonBiggs)
#### Post date: [24.Июнь.2023 21:48:10 UTC](https://meta.discourse.org/t/how-to-use-tailwind-to-theme-discourse/227326/7 "2023-06-24T21:48:10Z")
Привет, @abk,
Мы определённо заинтересованы. Хотелось бы узнать, как у вас продвигаются дела 🙂
---
### Author:  [@Steve\_John](https://meta.discourse.org/u/Steve_John)
#### Post date: [27.Июль.2024 22:12:52 UTC](https://meta.discourse.org/t/how-to-use-tailwind-to-theme-discourse/227326/8 "2024-07-27T22:12:52Z")
Я ищу информацию, так как мы хотели бы изменить тему по умолчанию в Discourse на Tailwind CSS. Я не являюсь опытным разработчиком, поэтому пытаюсь понять, что потребуется для реализации этой задачи, включая интеграцию Tailwind в экземпляр Discourse и его настройку в соответствии с нашими потребностями. У нас есть собственный разработчик, который может настраивать Tailwind CSS по мере необходимости, но он не знаком с его интеграцией в Discourse. Кроме того, нам не удалось найти весь HTML, используемый в теме по умолчанию Discourse, хотя мы предполагаем, что именно с него начнется наша кастомизация. Буду очень признателен за любые советы или рекомендации по тому, как действовать в этой ситуации. Спасибо за вашу помощь и поддержку.