Q1. What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing custom CSS. It's highly customizable and promotes rapid UI development.
Q2. How do you use Tailwind with React?
Install Tailwind via npm and configure it. Then you can use utility classes directly in className. For example, . You can also extract components for reuse.
Q3. What are the advantages of using Tailwind in React?
It speeds up development, reduces CSS file size (by purging unused classes), and keeps styling consistent. It also integrates well with component-based architecture.
Q4. How do you handle dynamic classes with Tailwind?
You can use template literals or libraries like clsx to conditionally apply classes. For example, className={`btn ${isActive ? 'bg-blue-500' : 'bg-gray-500'}`}. Tailwind also supports JIT mode for arbitrary values.
Q5. What is purging in Tailwind?
Purging removes unused CSS classes in production builds, resulting in a much smaller CSS file. Tailwind scans your files for class names and only includes those used. This is configured in tailwind.config.js.