从 javascript 检索 global.css 中定义的 tailwind/nativewind 主题颜色

Question

我正在将 expo react-native 与 nativewind 结合使用。 我的主题在

tailwind.config.js

:

中定义

module.exports = {
  darkMode: 'class',
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {
      colors: {
        border: 'var(--border)',
        input: 'var(--input)',
        ring: 'var(--ring)',
        background: 'var(--background)',
        foreground: 'var(--foreground)',
        primary: {
          DEFAULT: 'var(--primary)',
          foreground: 'var(--primary-foreground)',
        },

它从

global.css

中提取颜色变量

@layer base {
    :root {
        --background: hsl(0, 0%, 0%);
        --foreground: hsl(0, 0%, 98%);
        --card:hsl( 240 10% 3.9%);
        --card-foreground:hsl( 0 0% 98%);
        --popover:hsl( 240 10% 3.9%);
        --popover-foreground:hsl( 0 0% 98%);

我不太清楚如何让这些值在我的代码中使用它们。它们在 className 中以“text-primary”形式提供。

大多数结果表明我需要做这样的事情：

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from 'path/to/your/tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

但这解决了

fullConfig.theme.colors.border

等于

'var(--border)'

Answer 1

您不能在世博会上使用

.css

（据我所知）。在expo中创建样式的默认方式是

StyleSheet.create

。

所以我宁愿建议在 tailwind 配置 json 中设置颜色值。该resolveConfig实用程序功能只是为您提供扩展主题配置：您的配置+来自tailwind的基本配置。

如果您出于某种原因需要通过 css，您可以在运行时获取值，例如

getComputedStyle(document.documentElement)
    .getPropertyValue('--my-css-variable');