Gettıng started

Flexbox

Box Alignment

Spacing

Sizing

Border

Interaction

Helpers

Back to home

# Background Opacity

You can add transparency to your backgrounds. For example, you can adjust the hue of a color you want.
Class Property Preview
bg-opacity-0 --bg-opacity: 0;
mildcss
bg-opacity-05 --bg-opacity: .05;
mildcss
bg-opacity-10 --bg-opacity: .1;
mildcss
bg-opacity-15 --bg-opacity: .15;
mildcss
bg-opacity-20 --bg-opacity: .2;
mildcss
bg-opacity-25 --bg-opacity: .25;
mildcss
bg-opacity-30 --bg-opacity: .3;
mildcss
bg-opacity-35 --bg-opacity: .35;
mildcss
bg-opacity-40 --bg-opacity: .4;
mildcss
bg-opacity-45 --bg-opacity: .45;
mildcss
bg-opacity-50 --bg-opacity: .5;
mildcss
bg-opacity-55 --bg-opacity: .55;
mildcss
bg-opacity-60 --bg-opacity: .6;
mildcss
bg-opacity-65 --bg-opacity: .65;
mildcss
bg-opacity-70 --bg-opacity: .7;
mildcss
bg-opacity-75 --bg-opacity: .75;
mildcss
bg-opacity-80 --bg-opacity: .8;
mildcss
bg-opacity-85 --bg-opacity: 8.5;
mildcss
bg-opacity-90 --bg-opacity: .9;
mildcss
bg-opacity-95 --bg-opacity: .95;
mildcss
bg-opacity-100 --bg-opacity: 1;
mildcss

# Basic usage

We can give the simplest usage example as follows.
Blue 600
Blue 600 + opacity 75
Blue 600 + opacity 40
Blue 600 + opacity 15

Blue 600
Blue 600 + opacity 75
Blue 600 + opacity 40
Blue 600 + opacity 15

Get the color you want by using two different colors.
Pink 800
Red 500
Pink + Red

Pink 800
Red 500
Pink + Red

# Responsive

You can adjust the colors for each screen size. It is enough to add (screen): to the beginning of the color class. Example md:text-blue-400 Learn more

# Hover focus adn more

There are many selectors, with which you can make your work much more effective and professional. Hover and focus are one of them. Learn more