{ "$schema": "../schemas/code-crispies-module-schema.json", "id": "tailwind-basics", "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", "lessons": [ { "id": "bg-colors", "title": "Background Colors", "description": "Learn to apply background colors using Tailwind utilities.", "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." } ] }, { "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" } ] } ] }