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

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