How to use multiple CSS modules with Tailwind in Remix.js?

Question

I'm using Remix with Tailwind css. currently I followed the tailwind and remix docs to add a global css file:

"scripts": {
  "dev:css": "tailwindcss -i ./styles/tailwind.css -o ./app/styles/tailwind.css -w"
}

But what if I want to have a tailwind css file for a single component? like so:

# app/components/button.css
.button-primary {
  @apply bg-slate-400;
}

// app/components/Button.jsx
import './button.css'

export function Button() {
  return <button className='button-primary'>My Button</button>
}

Remix doesn't throw any errors but the styles are not applied, not sure if this is related to tailwind not parsing the button.css file or remix's issue

Answer 1

CSS modules are not currently supported in remix, you can follow the relevant discussion in the repo: https://github.com/remix-run/remix/discussions/2214

For now, you will need to expose your component CSS using the links() function on every route that uses it.