如何在 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。