Tailwind CSS 未扩展

Posted 2023-03-07

【中文标题】Tailwind CSS 未扩展

【英文标题】：Tailwind css not extended

【发布时间】：2021-10-23 17:21:00

【问题描述】：

我正在尝试通过将以下内容添加到配置来扩展我的顺风 css：

  theme: 
    extend: 
      colors: 
        'regal-blue': '#243c5a',
      ,
      backgroundColor: 
        'bg-r-c': 'rgba(144, 44, 20, 1)',
        'bg-b-c': 'rgba(38, 70, 83, 1)',
        'bg-b2-c': 'rgba(42, 157, 143, 1)',
        'bg-beige-c': 'rgba(233, 199, 114, 1)',
        'bg-beige2-c': 'rgba(244, 162, 97, 1)'
         
     ,
  ,

即使我只是从文档中复制它，它也不起作用。知道如何添加（背景）颜色吗？

【问题讨论】：

你是怎么编译的？你使用 Tailwind CLI、Webpack、Vite 还是其他东西？您是否重新启动了那个捆绑工具？

我在用vite @Jax-p 也重启了好几次。

【参考方案1】：

如果我正确理解了documentation，extend 部分中的backgroundColor 仅用于添加状态（例如 active 示例）。

如果您想通过默认调色板扩展它，您可以将其放置到 theme（不带 extend）并通过 javascript 传播默认值：

theme: 
  backgroundColor: theme => (
      ...theme('colors'), // this will insert default colors palette
      'primary': '#3490dc',
      'secondary': '#ffed4a',
      'danger': '#e3342f',
  )

---

主要是您应该使用调色板（而不是 backgroundColor 调色板）。

默认情况下，Tailwind 将整个默认调色板用作背景颜色。

来源：Tailwind CSS | Background Color customizing

  theme: 
    extend: 
      colors: 
        'regal-blue': '#243c5a',
        'r-c': 'rgba(144, 44, 20, 1)', // generates .bg-r-c
        'b-c': 'rgba(38, 70, 83, 1)', // generates .bg-b-c
        'b2-c': 'rgba(42, 157, 143, 1)',
        'beige-c': 'rgba(233, 199, 114, 1)',
        'beige2-c': 'rgba(244, 162, 97, 1)'
         
     ,
  ,

---

如果您需要像 .bg-r-c 这样的显式类并且您不想拥有 .text-r-c （等等），您可能希望将其简单地写在 CSS 文件中而不是配置中。