How to add RGB color code in Tailwind Css?

When using Tailwind CSS, adding RGB color variables is a useful feature that enables consistent color usage across your project. To define RGB color variables in Tailwind CSS, you typically need to configure them in the tailwind.config.js file. Here are the specific steps and examples:

Steps:

1. Open the tailwind.config.js file in your project:

2. Add your custom colors to the extend object within the theme section. This allows you to retain Tailwind's default colors while adding new ones.

3. Color values must be defined in the format 'rgb(red, green, blue)'.

Example:

Suppose we want to add a color named customBlue with an RGB value of rgb(13, 110, 253). We need to configure it in the tailwind.config.js file as follows:

javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: 'rgb(13, 110, 253)'
      }
    }
  }
}

Using the Defined Colors:

After defining the color variable, you can apply it anywhere in your project using class names like text-customBlue, bg-customBlue, etc.:

html
<button class="bg-customBlue text-white p-3 rounded">
  Button
</button>

Conclusion:

With this approach, you can easily use and manage colors throughout your project, ensuring consistency and making future color modifications more straightforward. This method is particularly suitable for large projects or scenarios where strict adherence to brand guidelines is required.