diff --git a/lessons/10-tailwind-basics.json b/lessons/10-tailwind-basics.json index 1f42b92..f4da6c4 100644 --- a/lessons/10-tailwind-basics.json +++ b/lessons/10-tailwind-basics.json @@ -1,8 +1,10 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "tailwind-basics", - "title": "Tailwind CSS Basics", + "title": "Tailwind CSS Basics - Understanding Utility-First Design", + "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", "lessons": [ { "id": "bg-colors", @@ -11,18 +13,148 @@ "task": "Add a blue background to the div using Tailwind classes.", "previewHTML": "
Hello Tailwind!
", "previewBaseCSS": "body { padding: 20px; font-family: sans-serif; }", + "sandboxCSS": "", "initialCode": "", + "previewContainer": "preview-area", "validations": [ { "type": "contains_class", "value": "bg-blue-500", "message": "Add the 'bg-blue-500' class for a blue background." } - ], - "sandboxCSS": "", - "previewContainer": "" + ] + }, + { + "id": "utility-first-philosophy", + "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
", + "previewBaseCSS": "body { font-family: sans-serif; margin: 0; }", + "sandboxCSS": "/* Traditional CSS approach:\n.card {\n background-color: white;\n padding: 1rem;\n border-radius: 0.25rem;\n}\n*/", + "initialCode": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains_class", + "value": "bg-white", + "message": "Add bg-white to set the background color to white." + }, + { + "type": "contains_class", + "value": "p-4", + "message": "Add p-4 to apply 1rem padding on all sides." + }, + { + "type": "contains_class", + "value": "rounded", + "message": "Add rounded to apply border-radius of 0.25rem." + }, + { + "type": "contains_class", + "value": "shadow-sm", + "message": "Add shadow-sm to apply small drop-shadow." + } + ] + }, + { + "id": "text-utilities", + "title": "Text Color and Size Utilities", + "description": "Tailwind provides comprehensive text utilities for styling typography. Text colors use the pattern text-{color}-{shade} where colors include red, blue, green, etc., and shades range from 50 (lightest) to 950 (darkest). For example, text-blue-600 applies a medium blue color.

Text sizes follow the pattern text-{size} with options like text-sm (0.875rem), text-base (1rem), text-lg (1.125rem), text-xl (1.25rem), and larger sizes up to text-9xl. Font weights use font-{weight} such as font-normal, font-medium, font-semibold, and font-bold.", + "task": "Style the heading with text-blue-600 for color, text-2xl for size, and font-bold for weight.", + "previewHTML": "
\n

Welcome to Tailwind CSS

\n

This heading demonstrates text utilities in action.

\n
", + "previewBaseCSS": "body { font-family: sans-serif; margin: 0; }", + "sandboxCSS": "/* Traditional CSS would be:\nh1 {\n color: #2563eb;\n font-size: 1.5rem;\n font-weight: 700;\n}\n*/", + "initialCode": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains_class", + "value": "text-blue-600", + "message": "Add text-blue-600 to make the text blue" + }, + { + "type": "contains_class", + "value": "text-2xl", + "message": "Add text-2xl to increase the font size to 1.5rem" + }, + { + "type": "contains_class", + "value": "font-bold", + "message": "Add font-bold to make the text bold (font-weight: 700)" + } + ] + }, + { + "id": "spacing-utilities", + "title": "Spacing with Padding and Margin", + "description": "Tailwind's spacing utilities follow a consistent pattern using a spacing scale where each unit represents 0.25rem (4px). Padding utilities use p-{size} for all sides, px-{size} for horizontal (left/right), py-{size} for vertical (top/bottom), or individual sides like pt-{size}, pr-{size}, pb-{size}, pl-{size}.

Common sizes include p-2 (0.5rem), p-4 (1rem), p-6 (1.5rem), and p-8 (2rem). Margin follows the same pattern but uses m- instead of p-. For example, mx-auto centers an element horizontally by applying automatic left and right margins.", + "task": "Style the button with px-6 for horizontal padding, py-3 for vertical padding, and mx-auto to center it.", + "previewHTML": "
\n \n
", + "previewBaseCSS": "body { font-family: sans-serif; margin: 0; }", + "sandboxCSS": "/* Traditional CSS equivalent:\nbutton {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n margin-left: auto;\n margin-right: auto;\n}\n*/", + "initialCode": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains_class", + "value": "px-6", + "message": "Add px-6 for horizontal padding (1.5rem left and right)" + }, + { + "type": "contains_class", + "value": "py-3", + "message": "Add py-3 for vertical padding (0.75rem top and bottom)" + }, + { + "type": "contains_class", + "value": "mx-auto", + "message": "Add mx-auto to center the button horizontally" + } + ] + }, + { + "id": "responsive-design", + "title": "Responsive Design with Breakpoint Prefixes", + "description": "Tailwind uses a mobile-first responsive design approach with breakpoint prefixes. The base utilities apply to all screen sizes, then you add prefixes for larger screens: sm: (640px+), md: (768px+), lg: (1024px+), xl: (1280px+), and 2xl: (1536px+).

For example, text-base md:text-lg lg:text-xl makes text normal size on mobile, larger on tablets (md), and even larger on desktop (lg). Each breakpoint overrides the previous one, so p-4 md:p-6 lg:p-8 means 1rem padding on mobile, 1.5rem on tablets, and 2rem on desktop.

Width utilities like w-full (100% width), w-1/2 (50% width), or fixed sizes like w-64 (16rem) can also be made responsive.", + "task": "Make the box responsive: w-full on mobile, md:w-1/2 on tablets, and lg:w-1/3 on desktop. Also add responsive text sizing with text-lg, md:text-xl, and lg:text-2xl.", + "previewHTML": "
\n
\n Responsive Box
\n Resize your browser to see the effect!\n
\n
", + "previewBaseCSS": "body { font-family: sans-serif; margin: 0; }", + "sandboxCSS": "/* Traditional CSS would require media queries:\n.responsive-box {\n width: 100%;\n font-size: 1.125rem;\n}\n@media (min-width: 768px) {\n .responsive-box {\n width: 50%;\n font-size: 1.25rem;\n }\n}\n@media (min-width: 1024px) {\n .responsive-box {\n width: 33.333333%;\n font-size: 1.5rem;\n }\n}\n*/", + "initialCode": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains_class", + "value": "w-full", + "message": "Add w-full for 100% width on mobile" + }, + { + "type": "contains_class", + "value": "md:w-1/2", + "message": "Add md:w-1/2 for 50% width on tablet and up" + }, + { + "type": "contains_class", + "value": "lg:w-1/3", + "message": "Add lg:w-1/3 for 33.33% width on desktop and up" + }, + { + "type": "contains_class", + "value": "text-lg", + "message": "Add text-lg for the base text size" + }, + { + "type": "contains_class", + "value": "md:text-xl", + "message": "Add md:text-xl for larger text on tablets" + }, + { + "type": "contains_class", + "value": "lg:text-2xl", + "message": "Add lg:text-2xl for even larger text on desktop" + } + ] } - ], - "description": "", - "difficulty": "advanced" + ] }