How to add rgb color code in tailwind css?

@arnoldo.moen 

To add a custom color using an RGB color code in Tailwind CSS, you can extend the default color palette by defining a new color in the theme section of your tailwind.config.js file.

Here's an example of how you can add an RGB color to your Tailwind CSS configuration:

1. Open your tailwind.config.js file (if you don't have one, you can create it by running npx tailwindcss init)
2. Inside the theme section of the file, add a new color with your desired RGB values:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

module.exports = {
  theme: {
    extend: {
      colors: {
        customColor: 'rgb(255, 0, 0)', // Replace the RGB values with your desired color
      },
    },
  },
  variants: {},
  plugins: [],
}

1. Save the changes and recompile your Tailwind CSS (run npx tailwindcss build styles.css -o output.css or use a build tool like Webpack)
2. You can now use your custom RGB color in your HTML or CSS like this:

1

<div class="bg-customColor"></div>

This will apply your custom RGB color to the background of the div element. You can replace customColor with any class name you prefer.

Remember to adjust the RGB values in the configuration to match the color you want to use.