Tailwind CSS
/Intermediate
Keyboard Navigation
Definition
Ensuring interactive elements (dropdowns, modals, navbars) built with Tailwind are logically structured in the HTML so the 'Tab' key flows naturally through them.
Explain Like I'm New
Tailwind only provides the visual styling. It is up to you to ensure that the HTML structure makes sense. A common mistake is building a 'Button' using a `<div>` with an `onClick`. A `<div>` cannot be tabbed to. You must use a `<button>` tag.
Real World Example
Creating a 'Skip to Main Content' link hidden at the very top of the page. It remains completely invisible (`sr-only`) until a keyboard user hits Tab, at which point it instantly appears on screen (`focus:not-sr-only`).
Common Use Cases
- •Screen readers
- •Power users
- •Accessibility compliance
Interactive Example
Interview Questions
basic
- If you make a `<div>` look exactly like a button using Tailwind, can a user 'Tab' to it with their keyboard?
intermediate
- What Tailwind class completely hides an element visually, but keeps it fully readable by Screen Reader software for blind users?