Tailwind CSS
/Intermediate
Reusable Components
Definition
The architectural philosophy of avoiding repetitive Tailwind classes by encapsulating them inside JavaScript framework components (React, Vue, Svelte) rather than CSS classes.
Explain Like I'm New
If you have 15 classes on a Button (`bg-blue-500 text-white p-4...`), and you need 10 buttons on a page, copy-pasting those 15 classes 10 times is a nightmare. Instead of fixing this in CSS, you create a `<Button>` React component. You write the classes ONCE inside the component, and reuse the component 10 times.
Real World Example
Building a `<Card>` and `<Button>` component library in Next.js.
Common Use Cases
- •DRY code (Don't Repeat Yourself)
- •React/Vue architecture
Interactive Example
/* ❌ BAD: Copy pasting classes everywhere */ <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Login </button> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Sign Up </button> /* ✅ GOOD: Componentize it in React/Vue */ function Button({ children, onClick }) { return ( <button onClick={onClick} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" > {children} </button> ); } // Now use it cleanly 500 times! <Button>Login</Button> <Button>Sign Up</Button>
Interview Questions
basic
- In a modern Tailwind workflow, where should you extract repetitive classes: into a CSS file using `@apply`, or into a React/Vue Component?
intermediate
- Why is copy-pasting Tailwind classes considered 'okay' for one-off elements, but bad for buttons?