顺风颜色可以从 CSS 中引用吗？

Question

我的 tailwind.config.js 中有一些自定义颜色：

colors: {
  primary: {
    500: '#0E70ED',
    600: '#0552b3'
  }
}

我想在我的 CSS 文件中使用它们。有没有办法替换#0e70ed下面的primary-500？

.prose a.custom-link {
  color: #0e70ed;
}

Answer 1

是的，您可以使用该theme()功能。

你的颜色

colors: {
  primary: {
    500: '#0E70ED',
    600: '#0552b3'
  }
}

将在 CSS 文件中提供为

.prose a.custom-link {
  color: theme('colors.primary.500');
}

更多信息请点击此处

Answer 2

这里为什么不直接使用顺风呢？

.prose a.custom-link {
  @apply text-primary-500;
}

如果你想在JS中访问它，你可以使用resolveConfig

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from '@/tailwind.config.js'
const twFullConfig = resolveConfig(tailwindConfig)

...
mounted() {
  console.log('tw', twFullConfig.theme.colors['primary-500'])
}

Answer 3

通过主题，还可以使用 css 变量和内部 tailwind 变量获得单一事实来源，如下所示。感谢 Ihar Aliakseyenka 的回答。

（似乎 tailwind 默认提供了 theme() 和颜色变量）

/* globals.css */
:root {
  --primary: theme(colors.slate.900);
  --secondary: theme(colors.slate.100);
}

和

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "var(--primary)"
        secondary: "var(--secondary)"
      },
    },
  },
};

然后你可以使用

body {
  background-color: var(--primary);
  color: var(--secondary);
}

或者..

<div className='bg-primary text-secondary'> </>

而且一切都是一致的