Hover & Dark Mode

Hover States and Dark Mode

Hover and other interactive states:

<button class="bg-blue-600 hover:bg-blue-700 active:scale-95 transition-all">
  Click Me
</button>

Available state variants: hover:, focus:, active:, disabled:, group-hover:

Dark mode with the dark: variant:

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Theme-aware content
</div>

Enable dark mode in tailwind.config.js:

module.exports = {
  darkMode: 'class',  // or 'media' for OS preference
}

With 'class' mode, add dark class to <html>:

<html class="dark">...</html>

With 'media' mode, dark mode follows OS preference automatically.

Combining variants:

<button class="dark:bg-blue-500 dark:hover:bg-blue-600">
  Dark mode button
</button>

Create a theme-aware card using dark: variants for background, text, and hover states.

Tailwind preview loading...

Click "Run" to execute your code.