iDevMeet

Tailwind CSS · module 3 of 9

Surfaces & Interaction States

Use borders, radius, shadows, hover, focus, transforms, visibility, and dark-mode variants.

Course map
one element, four conditionsbg-slate-800hover:bg-slate-700focus:ring-2disabled:opacity-50defaulthoverfocusdisabledThe prefix is the condition. Nothing new is being learned — it is the same utility, applied only whenthat state is true, which is why focus styles here are easy to keep rather than delete.
Surfaces & Interaction States — the idea in one picture

What this module covers

5 steps · Tailwind CSS

  1. Step 1. Lesson: Surfaces & Interaction States

    Use borders, radius, shadows, hover, focus, transforms, visibility, and dark-mode variants. Learning objectives - Recognize when surfaces & interaction states is the right tool. - Explain the role of rounded, shadow, focus:. - Build a small working example before combining it with a larger interface. - Identify one accessibility, maintainability, or error-handling improvement. Read the example, predict what it will do, then complete the small change described in the check question.

    Use borders, radius, shadows, hover, focus, transforms, visibility, and dark-mode variants. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Use the example to demonstrate surfaces & interaction states.

  2. Step 2. Quiz: Surfaces & Interaction States

    Check your understanding of Surfaces & Interaction States.

    focus: utilities apply when an element receives focus, including keyboard navigation. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Complete the knowledge check.

  3. Step 3. Exercise: Surfaces & Interaction States

    Style an accessible button with hover, focus, active, shadow, radius, and dark-mode states.

    This exercise turns the Surfaces & Interaction States lesson into a working code change. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Does the solution use rounded and shadow and focus:?

  4. Step 4. Review lab: Explain & improve Surfaces & Interaction States

    Rebuild the exercise without copying the solution. Then improve it in two ways: make the code easier to understand and add one useful edge case, responsive behavior, accessibility improvement, or error state. Finally, write a short explanation of how rounded, shadow, focus: work together.

    Rebuilding from memory and improving an edge case turns recognition into durable skill. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Does the improved version still use rounded, shadow, focus: clearly?

  5. Step 5. Mini project: Surfaces & Interaction States

    Create a reusable settings panel with inputs, buttons, alerts, focus states, and dark-mode styling.

    The mini project combines the module lesson, quiz, and exercise into one portfolio-ready result. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Does the project apply the module's surfaces & interaction states skills?

Loading code lab...