如何使用Remix.run动态更改tailwindcss主题颜色

Question

我正在将tailwindcss与Remix.run一起使用，并试图弄清楚如何根据从服务器获得的数据动态更改tailwindcss中的一些原色。我看到了一些使用Next.js框架的例子，但在Remix.run中无法做到这一点。

Answer 1

您应该在自定义颜色中使用CSS变量：

module.exports = {
theme: {
colors: {
// Using modern `rgb`
primary: 'rgb(var(--color-primary) / <alpha-value>)',
secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
// Using modern `hsl`
primary: 'hsl(var(--color-primary) / <alpha-value>)',
secondary: 'hsl(var(--color-secondary) / <alpha-value>)',
// Using legacy `rgba`
primary: 'rgba(var(--color-primary), <alpha-value>)',
secondary: 'rgba(var(--color-secondary), <alpha-value>)',
}
}
}

关于CSS变量的TailwindCSS文档。

您将能够通过JS更新这些变量。

Answer 2

我有几个例子。一个支持多个主题。另一种是使用CSS vars 的动态颜色

• https://codesandbox.io/s/remix-tailwind-multi-theme-oqf7oo
• https://codesandbox.io/s/remix-tailwind-dynamic-colors-wxv097