Tailwind css 未延长

Question

我正在尝试通过将以下内容添加到配置中来扩展我的顺风 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)'
        } 
     },
  },

即使我只是从文档中复制它也无法正常工作。知道如何添加（背景）颜色吗？

Answer 1

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

如果您想通过默认调色板扩展它，您可以将它放置到 theme（没有 extend）并通过 JavaScript:[=20 传播默认值=]

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

主要是你应该使用调色板（不是背景调色板）。

By default, Tailwind makes the entire default color palette available as background colors.

source: 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 文件而不是配置。

Tailwind css 未延长

Tailwind css not extended

css

tailwind-css