'Use Color in TailWind CSS

How to use Color in TailWind CSS ?

I am learning TailWind CSS.I am using TailWind CSS in Laravel.

My tailwind.config.js is like below

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

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

I declared CSS inside <head></head> is like below.

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

I am using .hello class in HTML like below.

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

But this is not working.

tailwind-css

Solution 1:^[1]

Firstly, you need to define colors object array in your custom theme file, because your tailwind config will overide the default. So please check your colors import is same with official doc,

const colors = require('tailwindcss/colors')

Solution 1

Define your custom color name into theme.colors

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

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

Solution 2

In other way, you can simplly adjust it with define in your main css file like this, Official Doc Link

// 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;
  }
}

and use it

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

ps, restart your app with npm run start or yarn start required!

Happy coding :)

Solution 2:^[2]

In tailwind-3 you could pass the exact color inline if you use [ ]:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Yilmaz

'Use Color in TailWind CSS

Solution 1:[1]

Solution 1

Solution 2

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]