文章/答案/技术大牛

发布

社区首页 >问答首页 >在TailWind CSS中使用颜色

问在TailWind CSS中使用颜色
EN

Stack Overflow用户

提问于 2021-06-17 13:52:06

回答 2查看 1.3K关注 0票数 0

如何在TailWind CSS中使用颜色？

我正在学习TailWind CSS。我在Laravel中使用TailWind CSS。

我的tailwind.config.js如下所示

const { colors } = require('tailwindcss/defaultTheme')

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      cadetblue:'#5f9ea0',
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

我声明<head></head>内部的CSS如下所示。

<style>
 .hello { background-color: theme('colors.cadetblue'); }
</style>

我在HTML中使用.hello类，如下所示。

<div class="hello">Hello</div>

但这不管用。

tailwind-css

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-06-17 17:46:49

首先，您需要在自定义的colors文件中定义theme对象数组，因为您的顺风配置将超过默认配置。因此，请检查您的colors导入是否与官方文档相同，

const colors = require('tailwindcss/colors')

解决方案1

将您的自定义颜色名称定义为theme.colors

const colors = require("tailwindcss/colors");

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  ...
  theme: {
  ...
    colors: {
      cadetblue: "#5f9ea0",
    },
  ...

解决方案2

以另一种方式，您可以简单地在您的主css文件正式医生链接中使用定义来调整它。

// in your css file

@tailwind base;
@tailwind components;
@tailwind utilities;

...
# You can add your custom class name into `utilities`
@layer utilities { 
  .bg-cadetblue {
    background-color: #5f9ea0;
  }
}

并使用它

<div class="bg-cadetblue">Hello</div>

ps，重新启动您的应用程序与npm run start或yarn start的要求！

快乐编码:)

票数 2

Stack Overflow用户

发布于 2022-03-18 01:46:12

在“顺风-3”中，如果您使用

<div class="bg-[#5f9ea0]">Hello</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68020767

复制

相似问题

问在TailWind CSS中使用颜色
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在TailWind CSS中使用颜色EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在TailWind CSS中使用颜色
EN