Tailwind Colors is one of the classes available in Tailwind CSS. Tailwind CSS boasts a lot of default color palettes to choose from for your designs and it also allows one to customize their own colors and use.

Table of Content

• Introduction
• Default Tailwind Color Palette
• Tailwind Background Colors
• Tailwind Text Color
• Customizing Colors
• Extending the Default Color palette
• Custome Colors
• Conclusion

Introduction

Tailwind colors allow web designers to create unique and visually appealing web pages. It uses an array of colors to create a consistent, harmonious look and feel across the entire website. It is a great way to create a cohesive design. Tailwind colors also provide a wide variety of colors to choose from, allowing designers to create a unique look.

In this post, you will learn how to use tailwind css colors, to customize the colors and even create your own color palatte.

Default Tailwind Color Palette

Tailwind Colors come with a well made color palette for everyone. Even if you don't know the color to use for your project, you can easily start with the ones provided by Tailwind Color palette.

Tailwind Background Colors

We can easily set the Tailwind Background color by using the bg-[color], where the [color] is the name of the color you want applied.

<div class="relative rounded-xl overflow-auto p-8">
  <div
    class="flex flex-col gap-4 font-mono text-white text-sm text-center font-extrabold leading-6 bg-stripes-fuchsia rounded-lg"
  >
    <button class="bg-green-500 rounded-lg p-3">Green</button>
    <button class="bg-purple-500 rounded-lg p-3">Purple</button>
    <button class="bg-blue-500 rounded-lg p-3">Blue</button>
    <button class="bg-yellow-500 rounded-lg p-3">Yellow</button>
    <button class="bg-red-500 rounded-lg p-3">Red</button>
    <button class="bg-pink-500 rounded-lg p-3">Pink</button>
  </div>
</div>

The Tailwind Background colors are shown below.

Tailwind Text Color

We can easily set the Tailwind colors text by using the text-[name], where the [name] represent the color name.

<div class="relative rounded-xl overflow-auto p-8">
  <div
    class="flex flex-col gap-4 font-mono text-white text-sm text-center font-extrabold leading-6 rounded-lg"
  >
    <p class="text-green-500 p-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <p class="text-purple-500 rounded-lg p-3">
      Odit, corporis. Deserunt expedita numquam aliquid libero ea.
    </p>
    <p class="text-blue-500 p-3">
      Eius sapiente quae adipisci tempora consequatur est dolorum praesentium repellat ipsum?
    </p>
    <p class="text-yellow-500 rounded-lg p-3">
      Odit, corporis. Deserunt expedita numquam aliquid libero ea.
    </p>
    <p class="text-red-500 p-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <p class="text-pink-500 p-3">Odit, corporis. Deserunt expedita numquam aliquid libero ea.</p>
  </div>
</div>

The Tailwind colors text Utilities

Customizing Colors

By default, Tailwind provides a set of basic colors, but you can add your own custom colors under the colors key in the theme section of your tailwind.config.js file.

Here’s an example of how to add a custom color:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    },
  },
};

Extending the Default Color palette

If you don't wish to completely override the default colors provided by Tailwind CSS. You can easily extend the color palette in the tailwind.config.js file. You can do this by using the theme.extend.colors section found in the file.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'elegant-green': '#51a868',
      },
    },
  },
};

This generates bg-elegant-green along with the other default tailwind colors palette. As this extension is merged deeply, you can even go ahead to give it a more deeper shade of color.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        green: {
          250: '#51a868',
        },
      },
    },
  },
};

The configuration above adds a class bg-green-250, a shade of green to the already existing ones.

Custome Colors

You can of course, change completely the Tailwind default color palette. You can replace them with your own colors.

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      green: {
        light: '#79d191',
        DEFAULT: '#299e49',
        dark: '#0d6926',
      },
      yellow: {
        light: '#b7c460',
        DEFAULT: '#819116',
        dark: '#768517',
      },
      blue: {
        dark: '#009eeb',
        DEFAULT: '#1fb6ff',
        light: '#85d7ff',
      },
    },
  },
};

The code above is an example of replacing tailwind colors palette with your own colors.

Conclusion

Finally, Tailwind Colors empowers designers to unleash their creativity and generate aesthetically pleasing designs without sacrificing usability by enabling color customization and performance optimization.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.