diff --git a/lessons/10-tailwind-basics.json b/lessons/10-tailwind-basics.json
index f4da6c4..e19b363 100644
--- a/lessons/10-tailwind-basics.json
+++ b/lessons/10-tailwind-basics.json
@@ -1,7 +1,7 @@
{
"$schema": "../schemas/code-crispies-module-schema.json",
"id": "tailwind-basics",
- "title": "Tailwind CSS Basics - Understanding Utility-First Design",
+ "title": "Tailwind CSS Basics",
"description": "Learn how Tailwind CSS revolutionizes styling by replacing traditional CSS selectors with utility-first classes. Understand the philosophy behind utility classes and how they solve common CSS problems like specificity conflicts and maintenance complexity.",
"mode": "tailwind",
"difficulty": "beginner",
@@ -29,7 +29,7 @@
"title": "Understanding Utility-First Design",
"description": "Tailwind CSS follows a utility-first approach where instead of writing custom CSS classes, you compose designs using small, single-purpose utility classes. Unlike traditional CSS where you might write .card { background: white; padding: 1rem; border-radius: 0.5rem; }, Tailwind provides pre-built utilities like bg-white, p-4, and rounded.
The bg-white utility sets background-color: white, p-4 applies padding: 1rem on all sides, and rounded adds border-radius: 0.25rem. This approach eliminates the need to context-switch between HTML and CSS files.",
"task": "Create a white card-like container with a small drop-shadow, 1rem padding and rounded corners.",
- "previewHTML": "
\n
\n
Card Title
\n
This is a card component built entirely with utility classes!
\n
\n
",
+ "previewHTML": "
\n
\n
Card Title
\n
This is a card component built entirely with utility classes!