Exercise 1: Bootstrap's Pre-Built Model vs. Tailwind's Utility-First Model — Possible Solution ==================================================================== BOOTSTRAP'S OWN MODEL ------------------------------ Per this chapter, "Bootstrap ships complete, pre-styled, pre-built components — a real button (.btn .btn-primary), a real navbar, a real modal, a real grid system — all ready to drop into markup and use immediately, with a finished, coherent visual design already applied." Using Bootstrap means applying a small number of Bootstrap's OWN predefined component class names, each of which brings an ENTIRE, already-finished visual design along with it — a developer doesn't design the button's own appearance at all; Bootstrap's own team already made every visual decision (color, padding, border-radius, hover state) as part of the .btn-primary class itself. TAILWIND'S OWN MODEL, PER cssfw1-2 ------------------------------ Per cssfw1-2, utility-first means "applying many small, single-purpose classes directly to an element, each doing exactly one thing." Using Tailwind means combining many small, individually meaningless utility classes (p-4, bg-blue-500, rounded-lg) together to CONSTRUCT a finished visual design piece by piece — no single class carries a complete, finished design; the developer assembles the final result themselves out of small building blocks. THE STRUCTURAL DIFFERENCE ------------------------------ The two models draw the line between "framework-provided" and "developer-provided" in opposite places. Bootstrap provides the FINISHED RESULT (a complete, already-designed button) and asks the developer only to select and apply it. Tailwind provides only the INDIVIDUAL INGREDIENTS (single-property utility classes) and requires the developer to actually assemble those ingredients into a finished design themselves. This is precisely why Bootstrap offers real speed (per this chapter's own "Real Speed Advantage" section) at the cost of visual sameness across projects using its defaults, while Tailwind offers real design flexibility at the cost of more assembly work per component (per cssfw1-2's own "markup full of classes" material). WHY THIS WORKS AS AN ANSWER ------------------------------ It defines both models precisely using each chapter's own wording, and explicitly identifies WHERE the structural line between "framework- provided" and "developer-provided" falls differently in each paradigm, rather than simply restating that the two are "different."