Buttons

Buttons are fundamental interactive elements in web design. Tailwind CSS provides a variety of utilities to style buttons effectively and manage their different states, such as hover, focus, and active.

Basic Button Styling

To style a basic button, you can use utilities for background color, text color, padding, border radius, and font weight.

Explanation

1. bg-yellow-500: Sets the background color to a shade of blue;
2. text-white: Sets the text color to white;
3. font-bold: Makes the text bold;
4. py-2: Adds vertical padding (0.5rem or 8px);
5. px-4: Adds horizontal padding (1rem or 16px);
6. rounded: Adds small rounded corners.

Hover State

To change the appearance of a button when the user hovers over it, you can use the hover: prefix with any utility class.

hover:bg-blue-700: Changes the background color to a dark blue when the button is hovered over.

Focus State

To style a button when it is focused (e.g., when it is selected using the keyboard), you can use the focus: prefix with any utility class.

In this example, when you hover the mouse cursor over a button, it changes to blue. If you use the Tab button, the button will turn red.

Active and Disabled States

Active and disabled states are used more seldom. However, we should consider it as well.

To style a button when it is active (e.g., when it is being clicked), you can use the active: prefix with any utility class.

To style a button when it is disabled (e.g., when it cannot be interacted with), you can use the disabled: prefix with any utility class.

Explanation

1. active:bg-green-800: Changes the background color to a darker shade of green when the button is active (pressed);
2. opacity-50: Reduces the button's opacity to make it look disabled;
3. cursor-not-allowed: Changes the cursor to indicate that the button is not clickable;
4. disabled attribute: Maks it non-interactive.

Example of All States

Combining all states into one example

Explanation

1. bg-blue-500: Sets the default background color;
2. hover:bg-blue-700: Changes the background color on hover;
3. focus:outline-none: Removes the default focus outline;
4. focus:ring-2: Adds a focus ring with a width of 2 pixels;
5. focus:ring-blue-600: Sets the color of the focus ring;
6. focus:ring-opacity-50: Sets the opacity of the focus ring;
7. active:bg-blue-800: Changes the background color when the button is active;
8. text-white: Sets the text color to white;
9. font-bold: Makes the text bold;
10. py-2: Adds vertical padding;
11. px-4: Adds horizontal padding;
12. rounded: Adds small rounded corners.

Note

If you need to delve deeper into the Tailwind Button Component, here is a link to the official documentation.