如何在 Remix.js 中將多個 CSS 模塊與 Tailwind 一起使用？

Question

我正在使用帶有 Tailwind css 的 Remix。 目前我按照順風和混音文檔添加了一個全局 css 文件：

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

但是，如果我想為單個組件創建一個順風 css 文件怎么辦？ 像這樣：

# 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 不會拋出任何錯誤，但沒有應用樣式，不確定這是否與 tailwind 不解析button.css文件或 remix 的問題有關

Answer 1

remix 目前不支持 CSS 模塊，你可以關注 repo 中的相關討論： https ://github.com/remix-run/remix/discussions/2214

現在，您需要在每條使用它的路由上使用links()函數來公開您的組件 CSS。