Tailwind Crash Course - Project Based Learning
Focus Modifier
Let’s take the same color class example which is .bg-blue-500. To add a focus, the method is the same like previous modifiers we learnt. Simply add focus: in-front of the class name.
.bg-blue-500Adding focus modifier ⬇️
.focus:bg-blue-500Simple enough? Here is what is available to you in focus: modifier
| Focus Classes | |
| .hover:bg-* .hover:text-{color}-{shade} .hover:font-bold .hover:border-{color}-{shade} |
background color text color font weight border color |
The exact same classes from hover:. Let’s do some hands-on experience.
<html>
<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="h-screen bg-gray-200 flex justify-center items-center p-6">
<!-- we are simply adding an input field -->
<input class="bg-white border border-gray-300 rounded-lg py-2 px-4 block w-full" type="email" placeholder="[email protected]">
</body>
</html>Let’s add focus modifier in input field.
<input class="bg-white focus:bg-blue-200 border border-gray-300 rounded-lg py-2 px-4 block w-full" type="email" placeholder="[email protected]">GIF HERE
Nothing complicated. By adding .focus:bg-blue-200 do nothing but changes background color of the input field from white to blue on your focusing.
Now, what would you do if you need to combine a focus stat with a breakpoint? For example, on mobile you want to behave in 1 way and on desktop you want to behave a different way. Don’t worry!
Let’ explore combination modifiers in the next lesson.
