Tailwind Crash Course - Project Based Learning
Hover Modifier
The hover modifier adds an entire array of classes that we can use. Let’s take the same example as in previous lesson we had.
.bg-blue-500Here, all you need to do is simply add hover: right in front of the class. ⬇️
.hover:bg-blue-500Now, not all of the classes are available for hover and you really wouldn’t want them. A lot of the other classes don’t need to have a hover state.
| Hover Classes | |
| .hover:bg-* .hover:text-{color}-{shade} .hover:font-bold .hover:border-{color}-{shade} |
background color text color font weight border color |
Let’s give it a try.
<html>
<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="h-screen flex justify-center items-center">
<!-- Just a simple button without hover state -->
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">Submit</button>
</body>
</html>A simple button without hover effect.
Let’s add a hover state to the button element by adding .hover:bg-blue-600.
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Submit</button>
<!-- Adding hover state to the button-->Results:
GIF here
To change the text color of the button on hover, we will add .hover:text-blue-300
<button class="bg-blue-500 hover:bg-blue-600 text-white hover:text-blue-300 font-bold py-2 px-4 rounded">Submit</button>GIF here
Pretty cool! Right? The greatest thing about it is that because of the way the classes are structured together, it’s really easy to understand and remember what the class names are.
Let’s jump to the next lesson.
