How to use Tailwind to theme Discourse

Dev
1

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?

7 Likes
2

Bumping this topic. We’re using Tailwind for consistency across multiple websites. I agree with @mksafi that the ideal solution would be to include the generated CSS with the discourse theme.

How can we include plain CSS that bypasses the preprocessing?

Thanks,
Andreas

6 Likes
3

The approach I’ve taken can be found within this repository: GitHub - 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. :slight_smile:

Best,
Andreas

4 Likes
4

This is intriguing. Im curious about what sort of visual results you get when pairing tailwind classes on top of what Discourse has already declared in its scss files.

Are you going through line by line in the inspector & re-styling many elements of core to use tailwind classes?

Are you only using this for new additions like theme components or plugins?

I would love to see a live example of this in action.

4 Likes
5

We have begun to embrace tailwind across our org – from websites to apps – so the initial target is to use tailwind to apply brand colors and fonts from a common definition. We’ll then use it for custom components for like headers, nav and heros. This is work I had started, and am just now picking up again.

This theme is live on our site, with a sample post at Neo4j Discourse 2021 Theme - General - Neo4j Online Community

If it’s interesting, I’ll post updates as we get more ambitious.

7 Likes
7

Hi @abk,

We are definitely interested. Keen to know how you’ve progressed :slight_smile:

2 Likes
8

I am seeking input here as we would like to change the default theme of Discourse to Tailwind CSS. I am not a hardcore developer, so I am trying to understand what it takes to get this done, including integrating Tailwind to discourse instance and customization as per our needs. We have our own developer who can customize Tailwind CSS as needed, but he is not familiar with integrating it into Discourse. Additionally, we were unable to find all the HTML used for the Discourse default theme, and also presuming that would be our starting point for customization . Any pointers or guidance on how to navigate this would be greatly appreciated. Thank you for your help and support.

1 Like