How to Solve “Default Colors Not Working” Issue in Tailwind CSS ?

Last Updated : 06 Jun, 2023

Tailwind CSS is a popular CSS framework noted for its extensive style and simplicity of use, Tailwind consists of various default colors that can be used to style various components on the web page. The tailwind CSS documentation consists of various default colors for styling various elements these colors are based on simple names that make users easy to understand.

Tailwind’s default colors are divided into several groups depending on their intended use. Grayscale, red, orange, yellow, green, blue, indigo, purple, pink, and translucent are among these groups. Let’s look at each of these groups in more detail in this article.

Main issue: The main issue with this is the version you are using, if you are using the older version and trying to access the new colors you will not get them the default colors are changed while the version is changing.

V2 Default	V2 Extended	V3 Unified
N/A	‘blueGray’	‘slate’
‘gray’	‘coolGray’	‘gray’
N/A	‘gray’	‘zinc’
N/A	‘trueGray’	‘netural’
N/A	‘warmGray’	‘stone’

Error: In the tailwind CSS version in v1.9.6, the colors like emerald, lime, sky, and stone will not be working

Default colors given in tailwind documentation are not working

For higher versions: For the higher versions (V 2.2.19) also the default colors will not be working

Default colors given in tailwind documentation are not working

How to Solve?

If at all you want to use the extended colors in the old version of your tailwinds.cofig.js file.

Note: If you want to override the colors which are there do not use the extend keyword then all colors will be overridden if you don’t have a set of completely custom colors in mind for your project, you can curate your colors from our default palette by importing tailwind CSS/colors in your configuration file and choosing the colors you want to use:

/** @type {import('tailwindcss').Config} */
module.exports = {
      content: ["./dist/*.{html,js}"],
      theme: {
        extend: {
            colors:{
                // You can configure your colors here
            }
        },
      },
      plugins: [],
}

Using default colors: The colors are extended using your config.js file, if the colors are not working probably you are using a lower version of tailwind CSS so try importing the colors by using your tailwindcss.config.js file..

const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./dist/*.{html,js}"],
    theme: {
        extend: {
            colors: {
                transparent: 'transparent',
                current: 'currentColor',
                black: colors.black,
                white: colors.white,
                emerald: colors.emerald,
                indigo: colors.indigo,
                yellow: colors.yellow,
                stone: colors.warmGray,
                sky: colors.lightBlue,
                neutral: colors.trueGray,
                gray: colors.coolGray,
                slate: colors.blueGray,
            },
        },
    },
    plugins: [],
}

Example 1: If your colors are not working try this example code.

Note: Use this code that has a tailwind version below 3.

Add the below code in src/index.html

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link href="/dist/output.css" rel="stylesheet"> 
</head> 
  
<body class="mx-auto flex flex-col  
    items-start justify-center"> 
    <h1 class="text-3xl text-green-600"> 
        Geeksforgeeks 
    </h1> 
      
    <p class="text-sm font-bold"> 
        Tailwind CSS Tutorial 
    </p> 
  
    <div class="grid grid-cols-2 gap-1  
        text-center font-bold text-white"> 
        <div class="bg-emerald-400 h-20 rounded-md  
            border-4 p-6 text-black"> 
            emerald 
        </div> 
        <div class="h-20 rounded-md border-4  
            bg-lime-400 p-6 text-black"> 
            lime 
        </div> 
        <div class="h-20 rounded-md border-4  
            bg-indigo-400 p-6 text-black"> 
            indigo 
        </div> 
        <div class="h-20 rounded-md border-4  
            bg-sky-500 p-6 text-black"> 
            sky 
        </div> 
        <div class="h-20 rounded-md border-4  
            bg-rose-400 p-6 text-black"> 
            Rose 
        </div> 
    </div> 
</body> 
  
</html>

tailwinds.config.js File:

Javascript

const colors = require('tailwindcss/colors') 
/** @type {import('tailwindcss').Config} */
module.exports = { 
    content: ["./src/**/*.{html,js}"], 
    theme: { 
        extend: { 
            colors: { 
                transparent: 'transparent', 
                current: 'currentColor', 
                black: colors.black, 
                white: colors.white, 
                emerald: colors.emerald, 
                indigo: colors.indigo, 
                yellow: colors.yellow, 
                stone: colors.warmGray, 
                sky: colors.lightBlue, 
                neutral: colors.trueGray, 
                gray: colors.coolGray, 
                slate: colors.blueGray, 
                lime: colors.lime, 
                rose: colors.rose, 
            }, 
        }, 
    }, 
    plugins: [], 
}

Add CSS in src/input.css

CSS

/* Write CSS Here */
@tailwind base; 
@tailwind components; 
@tailwind utilities;

Output: Check out the link – https://play.tailwindcss.com/VwcjgTVo5f

Default colors given in tailwind documentation are not working

Conclusion: To summarize, Tailwind CSS’s preset colors are a potent tool for creating websites that are both useful and aesthetically attractive. Tailwind’s functional naming system and comprehensive documentation make it simple to select and customize the appropriate colors for your project. Tailwind CSS has the tools you need to build beautiful, responsive, and user-friendly designs, whether you’re working on a basic landing page or a complicated online application.

Suggest improvement

How to set default font color using Tailwind CSS ?

Share your thoughts in the comments