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.
|
1 2 3 4 5 6 7 |
<p class="bg-blue-800/10 p-10 rounded-lg"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum iusto praesentium vel aspernatur esse, mollitia blanditiis ab minus harum asperiores dignissimos quod reiciendis unde exercitationem obcaecati qui fugit? Tenetur, quia. </p> |
You can use this method with all the colors you add to tailwind.config.js file. Here is another working example with primary color.
|
1 2 3 4 5 6 7 |
<p class="bg-primary/50 p-10 rounded-lg"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum iusto praesentium vel aspernatur esse, mollitia blanditiis ab minus harum asperiores dignissimos quod reiciendis unde exercitationem obcaecati qui fugit? Tenetur, quia. </p> |
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.
|
1 2 3 4 5 6 7 |
<p class="bg-[#433210]/20 p-10 rounded-lg"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum iusto praesentium vel aspernatur esse, mollitia blanditiis ab minus harum asperiores dignissimos quod reiciendis unde exercitationem obcaecati qui fugit? Tenetur, quia. </p> |
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:
|
1 2 3 4 5 6 7 |
<div class="bg-[#43321A80] p-4"> This is a custom brown color with 50% opacity. </div> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
module.exports = { theme: { extend: { colors: { primary: { 100: '#0070f3', // Fully opaque 50: '#0070f380', // 50% opacity }, }, }, }, variants: {}, plugins: [], } |
Here is how you will use that color in your HTML code.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="bg-primary-50 p-4"> This is a custom brown color with 50% opacity. </div> <div class="bg-primary-100 p-4"> This is a custom brown color with 50% opacity. </div> |
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.