HuntExams Academy
HTML/CSSBeginner#css#tailwind#responsive

What are Tailwind's responsive and state variant prefixes?

Tailwind uses prefixes like sm:, md:, lg: for min-width breakpoints (mobile-first) and hover:, focus:, disabled:, dark: for state/condition variants, applied directly to utility classes without writing separate media queries.

Example
<button class="bg-blue-500 hover:bg-blue-700 disabled:opacity-50 md:px-8 dark:bg-blue-900">
  Submit
</button>

Related Questions

1
HTML/CSSAdvanced#css#cross-browser

What are common cross-browser compatibility issues in CSS and how do you handle them?

Open
2
HTML/CSSBeginner#css#cross-browser

What is a CSS reset or normalize.css and why use one?

Open
3
HTML/CSSAdvanced#css#performance

What is critical CSS and how does it improve page performance?

Open