iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Exercises

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Three short Tailwind challenges - layout, dark mode, and accessible focus styles.

Three short challenges

EXAMPLE
<!-- 1. Build a responsive card grid -->
<!-- Goal: 1 column on mobile, 2 on md, 3 on lg, with a gap that grows with viewport -->
<div class='grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3 lg:gap-8'>
  <article class='rounded-xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md transition'>
    <h3 class='text-lg font-semibold text-gray-900'>Item 1</h3>
    <p class='mt-2 text-sm text-gray-600'>Some text.</p>
  </article>
  <!-- repeat -->
</div>


<!-- 2. Dark mode toggle (with class strategy) -->
<!-- tailwind.config.js: darkMode: 'class' -->
<button
  type='button'
  class='inline-flex items-center gap-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800'
  onclick='document.documentElement.classList.toggle("dark")'
>
  Toggle theme
</button>


<!-- 3. Accessible focus ring + skip link -->
<a
  href='#main'
  class='sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:rounded focus:bg-blue-600 focus:px-3 focus:py-1.5 focus:text-white'
>
  Skip to content
</a>

<button
  class='rounded bg-blue-600 px-4 py-2 text-white shadow-sm
         hover:bg-blue-700
         focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500
         disabled:opacity-50 disabled:cursor-not-allowed'
  type='submit'
>
  Submit
</button>


<!-- Stretch: a sticky table header that stays inside a scroll container -->
<div class='max-h-96 overflow-y-auto rounded border border-gray-200'>
  <table class='min-w-full divide-y divide-gray-200'>
    <thead class='sticky top-0 bg-gray-50 z-10'>
      <tr>
        <th class='px-4 py-2 text-left text-xs font-medium uppercase text-gray-500'>Name</th>
      </tr>
    </thead>
    <tbody class='divide-y divide-gray-100'>
      <!-- 100 rows -->
    </tbody>
  </table>
</div>

Why it matters

Mobile-first grid, dark mode by class, focus-visible ring + skip link - three small drills that lock in the patterns that matter for production UIs. Accessibility is not a Tailwind add-on; it is what focus and sr-only utilities exist for.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<!-- Fill in: <div class="____ items-center">…</div> -->
Try it Yourself »

Discussion

Loading…