Tailwind Crash Course - Project Based Learning

Combination Modifiers

Combination modifiers are nothing more than an another layer of modification. Let go back to the same example SMILEY HERE

 

.bg-blue-500

 

If we need to add a hover stat on a breakpoint, here is the method:

 

.{breakpoint}:{modifier}:{class-name}

 

.md:hover:bg-blue-500

 

So this will add hover stat but only on medium breakpoint. 

.{breakpoint}:{mod}:{...classes}
Classes  
.md:hover:bg-{color}-{shade}
.md:focus:bg-{color}-{shade}

.md:hover:text-{color}-{shade}
.md:focus:text-{color}-{shade}
med+ hover background color
med+ focus background color

med+ hover text color
med+ focus text color

Here we are wrapping modifiers and moving to the next lesson.