How to use Tailwind to theme Discourse

Initially I thought I would have to replace entire templates in order add Tailwind’s utility classes to the HTML. Replacing Discourse templates wholesale is a bad idea, I was informed. Fortunately, Tailwind also allows you to apply its CSS to arbitrary class names.

Something like the following is possible…

@layer components {
  .d-header {
    @apply bg-blue-100;

  #main-outlet.wrap {
    @apply bg-yellow-200;

…which is good news. So I setup a new theme using the discourse_theme CLI. I created a tailwind-input.css file and asked Tailwind to consume that and generate from it a common/common.scss.

But then Sass complained. It said

✘ 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));

Apparently, you’re not supposed to feed Tailwind generated CSS into a Sass file. The recommended solution is to configure your Rails app with this

config.assets.css_compressor = nil

I don’t know Rails or how Discourse’s backend is configured, and I’m on managed hosting, so I don’t know if that’s a feasible solution for me.

So I kept looking for another solution, and found out that I could tell Tailwind to not use that problematic rgb syntax.

So that’s what I went with for now, and things seem to work so far…but this feels more like a temporary workaround than a proper solution…

A good solution would be to provide the Discourse theme with a plain old CSS file, like common.css instead common.scss. I tried that but Discourse ignored my CSS file.

Is it possible to tell Discourse to use that CSS file in place of the Sass file? Or is there another good solution to this problem?