Variant Prefixes

Tailwind uses variant prefixes to apply styles under certain conditions. Common variants include:

  • hover:: Styles applied on hover.
  • focus:: Styles applied on focus.
  • active:: Styles applied when active.
  • disabled:: Styles applied when disabled.
  • dark:: Styles applied in dark mode.
<button class="bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50">
  Button
</button>

Integrating with existing CSS

Name Conflicts

Problem: Existing CSS classes may clash with Tailwind utility names
Solution: Use Tailwind's prefix option

  • Example: Set prefix: "twind-"
  • Result: hidden becomes twind-hidden

Specificity Issues

Problem: Existing CSS may have high specificity, overriding Tailwind
Solution: Use important: true in Tailwind config

  • This adds !important to all Tailwind utilities
  • Caution: May cause issues when using multiple CSS libraries

Separator Compatibility

Problem: Some tools don't allow : in class names
Solution: Use Tailwind's separator option

  • Example: Set separator: "--"
  • Result: hover:text-black becomes hover--text-black