CSS

Focus Modifier

Adding a focus state is simple using the focus: modifier along with any of the default classes provided by Tailwind CSS.

Hover Modifier

We can tap into the built-in hover state in CSS using the hover: modifier along with any of the default classes to achieve interactive designs.

Responsive Design

All modern applications should be able to responsively fit into the screen size. Tailwind is a mobile-first framework, meaning that all of the classes that we have talked about thus far, are for mobile and trickle up to desktop. But we can change this with a couple of modifiers.

Challenge 4 - Block Gallery

Time for another challenge and this time we flex our muscles with some flexbox in this brain-twisting block gallery challenge.

Flexbox

Tailwind uses Flexbox for the layout of items on the document. Flexbox is a css display property that defines a flex container. Once a container has been assigned as a flex container, we can use all of the alignment utility classes to achieve the desired look.