我们假设在tailwind.config.js中定义了以下内容：

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      white: colors.slate[50],
      dark: colors.slate[900],
    },
  },
  // content: ...
  // plugins: ...
}

现在我们可以在导入配置文件后访问属性white

import { theme } from './tailwind.config.js'

const color = theme.colors['white']

奖金

由于tailwind JIT不能处理动态类名，我们可以创建自己的getter来使用tailwind默认值和我们的配置

import { spacing as defaultSpacing } from 'tailwindcss/defaultTheme'
import { theme } from '../tailwind.config.js' // path may vary

export const getThemeColor = (color) => theme.colors[color]
export const getTailwindSpacing = t => defaultSpacing[`${t}`]

并在代码中的任何地方使用它和常用的style属性

export const SomeComponent = () => {
  const someCalculatedValue = 2 * 2

  return (
    <div style={{ 
      right: tailwindSpacing(someCalculatedValue) 
      backgroundColor: getThemeColor('white')
    }}>
      some content
    </div>
  )
}

typescript 版本

import { spacing as defaultSpacing } from 'tailwindcss/defaultTheme'
import { theme } from '../tailwind.config.js' // path may vary

export const getThemeColor = (color: string) => theme.colors[color]
export const getTailwindSpacing = (spacing: number) => {
  const number = `${spacing}` as keyof typeof defaultSpacing
  return defaultSpacing[number]
}