# איך להשתמש ב-Tailwind כדי להוסיף נושאים ל-Discourse

**URL:** <https://meta.discourse.org/t/how-to-use-tailwind-to-theme-discourse/227326>\
**Category:** Development\
**Created:** [17 במאי,‏ 2022,‏ 5:24pm UTC](https://meta.discourse.org/t/how-to-use-tailwind-to-theme-discourse/227326 "2022-05-17T17:24:18Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![abk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/abk/32/207505_2.png) [@abk](https://meta.discourse.org/u/abk)\
**Post date:** [16 בפברואר,‏ 2023,‏ 6:29pm UTC](https://meta.discourse.org/t/how-to-use-tailwind-to-theme-discourse/227326/3 "2023-02-16T18:29:33Z")

</div>

The approach I’ve taken can be found within this repository: [GitHub - neo4j-contrib/discourse-theme-neo4j · GitHub](https://github.com/neo4j-contrib/discourse-theme-neo4j)

The essential points related to Tailwind:

- A separate NPM target builds tailwind using postcss: `"tailwind:dev": "postcss tailwind/global.scss -o assets/tailwind.css`
- The CSS output is placed in `assets` to be included with the theme. Notice that `about.json` includes the asset location.
- The Discourse SCSS _does not_ directly reference this produced CSS
- Instead, there is a javascript initialiser at `javascripts/discourse/initializers/tailwind-init.js.es6` which appends the asset to the end of the `discourse-assets-stylesheets` element as a new `link` element
- Important: the Tailwind preflight is disabled in the `tailwind.config.js`, because it would otherwise reset all preceding CSS. Instead, I want to add the Tailwind classes and rely on Discourse’s own preflight.

Not elegant, but it works for us. Use for your own inspiration. 🙂

Best,  
Andreas

---

_[View the full topic](https://meta.discourse.org/t/how-to-use-tailwind-to-theme-discourse/227326)._