focus State
In the focus state, Styling is applied when an element is focused, using focus: prefix in utility classes.
Example: The example illustrates the focusing states in Tailwind CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Welcome to GFG</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="flex justify-center items-center min-h-screen"> <div> <button class="bg-green-600 p-4 rounded-md focus:bg-green-700"> Hello Geek! </button> </div> </div> </body> </html> |
Output:
The table below illustrates the hover and focus states alongside their corresponding descriptions.
| Prefix | Description |
|---|---|
hover |
Applied as a prefix to define styles for the hover state of an element, allowing customization upon mouseover. |
focus |
Used as a prefix to specify styles for the focus state, typically on interactive elements like buttons or inputs. |
How to handle Hover and Focus States in Tailwind CSS ?
Handling hover and focus states in Tailwind CSS involves using utility classes that specifically target these states. The hover: prefix is used for hover states, and the focus: prefix is used for focus states.
Contact Us