Skip to content

Commit 229fb19

Browse files
committed
chore: simplify title and enhance preview HTML for tailwind basics module
1 parent 97b685a commit 229fb19

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

lessons/10-tailwind-basics.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"$schema": "../schemas/code-crispies-module-schema.json",
33
"id": "tailwind-basics",
4-
"title": "Tailwind CSS Basics - Understanding Utility-First Design",
4+
"title": "Tailwind CSS Basics",
55
"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.",
66
"mode": "tailwind",
77
"difficulty": "beginner",
@@ -29,7 +29,7 @@
2929
"title": "Understanding Utility-First Design",
3030
"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 <kbd>.card { background: white; padding: 1rem; border-radius: 0.5rem; }</kbd>, Tailwind provides pre-built utilities like <kbd>bg-white</kbd>, <kbd>p-4</kbd>, and <kbd>rounded</kbd>.<br><br>The <kbd>bg-white</kbd> utility sets <kbd>background-color: white</kbd>, <kbd>p-4</kbd> applies <kbd>padding: 1rem</kbd> on all sides, and <kbd>rounded</kbd> adds <kbd>border-radius: 0.25rem</kbd>. This approach eliminates the need to context-switch between HTML and CSS files.",
3131
"task": "Create a white card-like container with a small drop-shadow, 1rem padding and rounded corners.",
32-
"previewHTML": "<div class=\"bg-gray-100 p-6\">\n <div class=\"{{USER_CLASSES}}\">\n <h3 class=\"text-lg font-semibold mb-2\">Card Title</h3>\n <p class=\"text-gray-600\">This is a card component built entirely with utility classes!</p>\n </div>\n</div>",
32+
"previewHTML": "<div class=\"bg-gray-100 h-72 p-6\">\n <div class=\"{{USER_CLASSES}}\">\n <h3 class=\"text-lg font-semibold mb-2\">Card Title</h3>\n <p class=\"text-gray-600\">This is a card component built entirely with utility classes!</p>\n </div>\n</div>",
3333
"previewBaseCSS": "body { font-family: sans-serif; margin: 0; }",
3434
"sandboxCSS": "/* Traditional CSS approach:\n.card {\n background-color: white;\n padding: 1rem;\n border-radius: 0.25rem;\n}\n*/",
3535
"initialCode": "",

0 commit comments

Comments
 (0)