Hover State
In the hover state, Styling is applied when the mouse hovers over an element, using hover:
prefix in utility classes.
Example: The example illustrates the hovering 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" > < link href = "/dist/output.css" rel = "stylesheet" > </ head > < body > < div class="flex justify-center items-center min-h-screen"> < div > < button class="bg-green-600 p-4 rounded-md hover:bg-green-700"> Hello Geek! </ button > </ div > </ div > </ body > </ html > |
Output:
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.