How to Use RGBA Color in TailwindCSS | Color Customization

Looking to control the opacity of the color just like you do in regular CSS with rgba(). Fortunately, Tailwind CSS provides several ways to use RGBA (Red, Green, Blue, Alpha) colors, allowing you to control the opacity and create stunning visual effects. In this blog post, Here are three different ways to use RGBA colors in Tailwind CSS.

Controlling Color Opacity with /10 to /90 in TailwindCSS

One of the most straightforward ways to use RGBA colors in Tailwind CSS is by adding the opacity of colors with the opacity attribute. You can achieve this by adding /10, /20, up to /90 to any Tailwind color class. For example, if you have a button with a blue background, you can make it slightly transparent by adding /20. So the color will be bg-blue-800/10. Here is a simple working example of RGBA color in TailwindCSS.

You can use this method with all the colors you add to tailwind.config.js file. Here is another working example with primary color.


Using RGBA with Arbitrary Values

The /10 upto /90 works with any arbitrary values you want to use in your design. One of the ways to add opacity is to just simply add /10 or /20 or whatever you want at the end of the color. Here is an example of using RGBA color arbitrary values.

Read Also: How to add Custom Colors in TailwindCSS

Tailwind CSS also allows you to use RGBA colors with arbitrary values, giving you even more flexibility in your color choices. To do this, you can specify an RGBA color in the form of bg-[#RRGGBBAA], where RR represents the red component, GG represents green, BB represents blue, and AA represents alpha (opacity) values ranging from 00 (fully transparent) to FF (fully opaque).

For example, if you want to use a custom brown color with 50% opacity, you can do the following:

Here is the working example of the code given above.

Adding Opacity to Custom Colors in tailwind.config.js

Tailwind CSS also allows you to define your custom colors in the tailwind.config.js file and add opacity to them globally. This is particularly useful if you have specific primary or secondary brand colors that you want to use consistently throughout your project.

Here’s how you can define custom colors with opacity in your tailwind.config.js file:

Here is how you will use that color in your HTML code.

In conclusion, The simplest way to use the RGBA color in TailwindCSS is to use like bg-{color}/{opacity} where {color} is any TailwindCSS color and {opacity} is 10 upto 90. Tailwind CSS also provides several other ways to use RGBA colors, allowing you to control opacity and create visually appealing designs. Whether you prefer to modify existing colors or define custom colors with specific opacity values, Tailwind CSS empowers you to craft beautiful and unique web interfaces.

Latest articles

Related articles