HuntExams Academy
HTML/CSSBeginner#css#tailwind

What is Tailwind CSS and how does it differ from writing custom CSS?

Tailwind is a utility-first CSS framework providing small, single-purpose classes (like flex, p-4, text-center) composed directly in markup, instead of writing custom class names and separate stylesheets. It speeds up development and avoids unused CSS bloat via its JIT purge, but can make markup verbose.

Example
<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition">
  <h3 class="text-lg font-bold text-gray-800">Card Title</h3>
  <button class="px-4 py-2 bg-blue-600 text-white rounded">Action</button>
</div>

Related Questions

1
HTML/CSSIntermediate#css#tailwind

How do you customize and extend Tailwind's default theme?

Open
2
HTML/CSSBeginner#css#tailwind

What are Tailwind's responsive and state variant prefixes?

Open
3
HTML/CSSAdvanced#css#cross-browser

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

Open