Tailwind CSS 未扩展答案

【问题标题】：Tailwind css not extendedTailwind CSS 未扩展
【发布时间】：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 也重启了好几次。

标签： css tailwind-css

【解决方案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 文件中而不是配置中。

【讨论】：