reactjs TailwindCSS中没有与颜色相关的功能

xwbd5t1u 于 2022-12-26 发布在 React

关注(0)|答案(1)|浏览(124)

我尝试在我的ReactJS项目中使用tailwind css，每一个样式（对齐，填充等）都工作得很好。但是当我尝试应用任何颜色时，似乎什么都不起作用。我甚至从文档中复制了一些例子，甚至它们都不起作用。这可能是一个配置问题，但我找不到它。
我的代码：

- 顺风配置cjs**

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    colors: {},
    fontFamily: {
      serif: ["Cormorant"],
    },
    extend: {},
  },
  plugins: [],
};

- 主页. tsx**

export default function Home() {
  return (
    <div>
      <Background />
      <p className="text-sky-400">The quick brown fox...</p>
      <div className="bg-gradient-to-r from-cyan-500 to-blue-500 "></div>
    </div>
  );
}

结果：

reactjs

来源：https://stackoverflow.com/questions/74911264/nothing-color-related-working-in-tailwindcss

1条答案

按热度按时间

nnt7mjpx1#

在主题中设置colors属性将覆盖默认调色板。删除颜色：{}从你的顺风配置和颜色应该工作。你可以阅读更多关于它在这里的文档自定义颜色。
更新配置如下：

/** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ["./src/**/*.{js,jsx,ts,tsx}"],
      theme: {
        fontFamily: {
          serif: ["Cormorant"],
        },
        extend: {},
      },
      plugins: [],
    };

如果你需要使用自定义颜色，你可以像下面这样使用extend属性。这将保留默认颜色并添加额外的颜色。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        brown: {
          50: '#fdf8f6',
          100: '#f2e8e5',
          200: '#eaddd7',
          300: '#e0cec7',
          400: '#d2bab0',
          500: '#bfa094',
          600: '#a18072',
          700: '#977669',
          800: '#846358',
          900: '#43302b',
        },
      }
    },
    fontFamily: {
      serif: ["Cormorant"],
    },
  },
  plugins: [],
};

赞(0）回复(0）举报 2022-12-26

我来回答

reactjs TailwindCSS中没有与颜色相关的功能

1条答案

相关问题

热门标签

最新问答