Ring and outline colors in Tailwind - Mini Project: Build & Apply

Ring and Outline Colors with Tailwind CSS

📖 Scenario: You are creating a simple webpage with buttons that have different ring and outline colors to highlight them when focused or hovered. This helps users see which button is active or selected.

🎯 Goal: Build a webpage with three buttons. Each button should have a distinct ring color on focus and an outline color on hover using Tailwind CSS classes.

📋 What You'll Learn

Create three buttons with text: 'Save', 'Cancel', and 'Delete'.

Add a ring color of blue to the 'Save' button on focus.

Add a ring color of green to the 'Cancel' button on focus.

Add a ring color of red to the 'Delete' button on focus.

Add an outline color of blue on hover for the 'Save' button.

Add an outline color of green on hover for the 'Cancel' button.

Add an outline color of red on hover for the 'Delete' button.

Use Tailwind CSS utility classes only.

Ensure the buttons are accessible with proper focus and hover states.

💡 Why This Matters

🌍 Real World

Buttons with clear focus and hover states improve user experience and accessibility on websites and apps.

💼 Career

Front-end developers often use Tailwind CSS to quickly style interactive elements with consistent focus and hover feedback.

1

Create the HTML structure with three buttons

Write the HTML code to create three buttons with the exact texts: Save, Cancel, and Delete. Wrap them inside a <main> element.

Tailwind

Need a hint?

Use the <button> tag for each button inside the <main> element.

2

Add base Tailwind classes for spacing and font

Add Tailwind CSS classes to each button to give them padding px-4 py-2, margin m-2, rounded corners rounded, and a base font size text-base.

Tailwind

  Save
  Cancel
  Delete

Need a hint?

Use the classes px-4 py-2 m-2 rounded text-base inside the class attribute for each button.

3

Add ring colors on focus for each button

Add Tailwind classes to each button to show a ring on focus with these exact colors: Save button uses focus:ring-blue-500, Cancel button uses focus:ring-green-500, and Delete button uses focus:ring-red-500. Also add focus:outline-none and focus:ring-2 to all buttons for consistent ring style.

Tailwind

  Save
  Cancel
  Delete

Need a hint?

Use focus:outline-none focus:ring-2 focus:ring-COLOR classes on each button with the correct color.

4

Add outline colors on hover for each button

Add Tailwind classes to each button to show an outline on hover with these exact colors: Save button uses hover:outline-blue-500, Cancel button uses hover:outline-green-500, and Delete button uses hover:outline-red-500. Also add hover:outline to all buttons to enable the outline on hover.

Tailwind

  Save
  Cancel
  Delete

Need a hint?

Use hover:outline hover:outline-COLOR classes on each button with the correct color.