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

Posted 2023-03-06

【中文标题】可以从 CSS 中引用顺风颜色吗？

【英文标题】：Can tailwind colors be referenced from 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;

【参考方案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

完美！谢谢。