CODEWITHSUNDEEP
tailwind-css
abu abu
abu abu

Reputation: 7028

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.

Upvotes: 0

Views: 5105

Answers (2)

Yilmaz
Yilmaz

Reputation: 49182

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

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

Upvotes: 1

JsWizard
JsWizard

Reputation: 1749

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 :)

Upvotes: 2

Related Questions