Tailwind 类不反映在标题标签上答案

【问题标题】：Tailwind classes not reflecting on heading elementsTailwind 类不反映在标题标签上
【发布时间】：2022-07-07 07:34:21
【问题描述】：

我做了一个名为Heading的react函数组件，代码如下：

function Heading({
  color = "white",
  tag = "h1",
  text,
  fontSize = "6xl",
  margin = "",
  fontWeight = "normal",
}: Props): Element<any> {
  const Tag = tag;
  return (
    <Tag
      className={`text-${color} text-${fontSize} ${margin} font-${fontWeight}`}
    ></Tag>
  );
}

我认为它非常简单，它甚至可以呈现正确的 HTML：<h1 class="text-black text-6xl mb-5 font-normal">Dashboard</h1>

但它仍然没有反映这些变化。我知道标题标签样式由于preflight 而被重置，但是当我应用实用程序类时它不会被覆盖吗？

这是我的tailwind.config.js：

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: "#497BFA",
      },
    },
  },
  plugins: [],
};

【问题讨论】：

See this
你不能像text-${color}那样构造你的类，你需要使用像{(color === 'red') ? 'text-red' : 'text-white'}这样的东西

标签： tailwind-css

【解决方案1】：

这是故意的，并在文档 here: 中进行了讨论

如果您想为类似的元素添加默认样式，您可以通过adding custom base styles: 进行操作

`@tailwind base;
h1 {
  @apply text-2xl;
}
h2 {
  @apply text-xl;
}
h3 {
  @apply text-lg;
}
a {
   @apply text-blue-600 underline;
}
@tailwind components;
@tailwind utilities;

【讨论】：