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

【问题标题】：Can tailwind colors be referenced from CSS?可以从 CSS 中引用顺风颜色吗？
【发布时间】：2021-07-20 10:29:51
【问题描述】：

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

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

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

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

【问题讨论】：

标签： tailwind-css

【解决方案1】：

是的，您可以使用theme() 指令

你的颜色

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

将在 CSS 文件中作为

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

更多信息here

【讨论】：

【解决方案2】：

这里为什么不直接使用tailwind？

.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'])
}

【讨论】：

谢谢你，kissu。奇迹般有效。没有看过顺风文档的这一部分。顺风的@apply和废弃的CSS@apply功能有什么关系吗？
不，两者之间没有任何共同点，CSS 草案被放弃是一件好事，这样 2 之间就没有“冲突”。亚当在这里回答：github.com/tailwindlabs/tailwindcss/issues/627
完美！谢谢。