public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity
Files
c5606765449c3425335ff41262c2071b7dc7d499
code-crispies/lessons/10-tailwind-basics.json
Michael Czechowski c560676544 feat: implement #4 — replace answer-revealing validation messages with pedagogical hints 
Rewrite ~120 validation error messages across 17 English lesson modules
and their localized variants (ar, de, es, pl, uk) to use concept questions,
property hints, and directional nudges instead of revealing the exact
CSS property-value answers.

Priority modules (flexbox, box-model, colors, positioning) fully rewritten.
All remaining CSS modules updated. Only message strings changed — no
validation logic modifications.
2026-03-28 19:40:28 +01:00

161 lines
10 KiB
JSON
Raw Blame History

{
"$schema": "../schemas/code-crispies-module-schema.json",
"id": "tailwind-basics",
"title": "Tailwind",
"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": "Backgrounds",
"description": "Learn to apply background colors using Tailwind utilities.",
"task": "Add a blue background to the div using Tailwind classes.",
"previewHTML": "<div class=\"{{USER_CLASSES}} p-8 rounded\">Hello Tailwind!</div>",
"previewBaseCSS": "body { padding: 20px; font-family: sans-serif; }",
"sandboxCSS": "",
"initialCode": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains_class",
"value": "bg-blue-500",
"message": "Which Tailwind utility sets a blue background color? Think about the <kbd>bg-{color}-{shade}</kbd> pattern."
}
]
},
{
"id": "utility-first-philosophy",
"title": "Utility-First",
"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.",
"task": "Create a white card-like container with a small drop-shadow, 1rem padding and rounded corners.",
"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>",
"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": "Which Tailwind utility sets a white background? The pattern is <kbd>bg-{color}</kbd>."
},
{
"type": "contains_class",
"value": "p-4",
"message": "Which Tailwind utility adds 1rem padding on all sides? Remember: each spacing unit is 0.25rem."
},
{
"type": "contains_class",
"value": "rounded",
"message": "Which Tailwind utility adds rounded corners? It is one of the simplest utility names."
},
{
"type": "contains_class",
"value": "shadow-sm",
"message": "Which Tailwind utility adds a small drop-shadow? Look for a <kbd>shadow-</kbd> variant."
}
]
},
{
"id": "text-utilities",
"title": "Text Utilities",
"description": "Tailwind provides comprehensive text utilities for styling typography. Text colors use the pattern <kbd>text-{color}-{shade}</kbd> where colors include red, blue, green, etc., and shades range from 50 (lightest) to 950 (darkest). For example, <kbd>text-blue-600</kbd> applies a medium blue color.<br><br>Text sizes follow the pattern <kbd>text-{size}</kbd> with options like <kbd>text-sm</kbd> (0.875rem), <kbd>text-base</kbd> (1rem), <kbd>text-lg</kbd> (1.125rem), <kbd>text-xl</kbd> (1.25rem), and larger sizes up to <kbd>text-9xl</kbd>. Font weights use <kbd>font-{weight}</kbd> such as <kbd>font-normal</kbd>, <kbd>font-medium</kbd>, <kbd>font-semibold</kbd>, and <kbd>font-bold</kbd>.",
"task": "Style the heading with <kbd>text-blue-600</kbd> for color, <kbd>text-2xl</kbd> for size, and <kbd>font-bold</kbd> for weight.",
"previewHTML": "<div class=\"p-6 bg-gray-50\">\n <h1 class=\"{{USER_CLASSES}} mb-4\">Welcome to Tailwind CSS</h1>\n <p class=\"text-gray-700\">This heading demonstrates text utilities in action.</p>\n</div>",
"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": "Which Tailwind utility controls text color? Use the <kbd>text-{color}-{shade}</kbd> pattern with a blue shade."
},
{
"type": "contains_class",
"value": "text-2xl",
"message": "Which Tailwind utility sets the font size to 1.5rem? Check the <kbd>text-{size}</kbd> scale."
},
{
"type": "contains_class",
"value": "font-bold",
"message": "Which Tailwind utility makes text bold? The <kbd>font-{weight}</kbd> pattern controls font weight."
}
]
},
{
"id": "spacing-utilities",
"title": "Spacing",
"description": "Tailwind's spacing utilities follow a consistent pattern using a spacing scale where each unit represents 0.25rem (4px). Padding utilities use <kbd>p-{size}</kbd> for all sides, <kbd>px-{size}</kbd> for horizontal (left/right), <kbd>py-{size}</kbd> for vertical (top/bottom), or individual sides like <kbd>pt-{size}</kbd>, <kbd>pr-{size}</kbd>, <kbd>pb-{size}</kbd>, <kbd>pl-{size}</kbd>.<br><br>Common sizes include <kbd>p-2</kbd> (0.5rem), <kbd>p-4</kbd> (1rem), <kbd>p-6</kbd> (1.5rem), and <kbd>p-8</kbd> (2rem). Margin follows the same pattern but uses <kbd>m-</kbd> instead of <kbd>p-</kbd>. For example, <kbd>mx-auto</kbd> centers an element horizontally by applying automatic left and right margins.",
"task": "Style the button with <kbd>px-6</kbd> for horizontal padding, <kbd>py-3</kbd> for vertical padding, and <kbd>mx-auto</kbd> to center it.",
"previewHTML": "<div class=\"p-6 bg-gray-100\">\n <button class=\"{{USER_CLASSES}} bg-blue-500 text-white rounded block\">\n Centered Button\n </button>\n</div>",
"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": "Which Tailwind utility adds horizontal padding of 1.5rem? The <kbd>px-</kbd> prefix targets left and right."
},
{
"type": "contains_class",
"value": "py-3",
"message": "Which Tailwind utility adds vertical padding of 0.75rem? The <kbd>py-</kbd> prefix targets top and bottom."
},
{
"type": "contains_class",
"value": "mx-auto",
"message": "Which Tailwind utility centers an element horizontally using auto margins?"
}
]
},
{
"id": "responsive-design",
"title": "Breakpoints",
"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: <kbd>sm:</kbd> (640px+), <kbd>md:</kbd> (768px+), <kbd>lg:</kbd> (1024px+), <kbd>xl:</kbd> (1280px+), and <kbd>2xl:</kbd> (1536px+).<br><br>For example, <kbd>text-base md:text-lg lg:text-xl</kbd> makes text normal size on mobile, larger on tablets (md), and even larger on desktop (lg). Each breakpoint overrides the previous one, so <kbd>p-4 md:p-6 lg:p-8</kbd> means 1rem padding on mobile, 1.5rem on tablets, and 2rem on desktop.<br><br>Width utilities like <kbd>w-full</kbd> (100% width), <kbd>w-1/2</kbd> (50% width), or fixed sizes like <kbd>w-64</kbd> (16rem) can also be made responsive.",
"task": "Make the box responsive: <kbd>w-full</kbd> on mobile, <kbd>md:w-1/2</kbd> on tablets, and <kbd>lg:w-1/3</kbd> on desktop. Also add responsive text sizing with <kbd>text-lg</kbd>, <kbd>md:text-xl</kbd>, and <kbd>lg:text-2xl</kbd>.",
"previewHTML": "<div class=\"p-6 bg-gray-100\">\n <div class=\"{{USER_CLASSES}} bg-purple-500 text-white p-6 rounded text-center\">\n <span>Responsive Box</span><br>\n <small class=\"opacity-75\">Resize your browser to see the effect!</small>\n </div>\n</div>",
"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": "Which Tailwind utility makes an element take up 100% width? This is the base (mobile) style."
},
{
"type": "contains_class",
"value": "md:w-1/2",
"message": "How do you set 50% width at the <kbd>md:</kbd> breakpoint? Tailwind uses fraction notation for widths."
},
{
"type": "contains_class",
"value": "lg:w-1/3",
"message": "How do you set one-third width at the <kbd>lg:</kbd> breakpoint? Use the same fraction pattern."
},
{
"type": "contains_class",
"value": "text-lg",
"message": "Which Tailwind text size utility is one step above the base size? Think about the <kbd>text-{size}</kbd> scale."
},
{
"type": "contains_class",
"value": "md:text-xl",
"message": "How do you increase the text size at the <kbd>md:</kbd> breakpoint? Go one step larger."
},
{
"type": "contains_class",
"value": "lg:text-2xl",
"message": "How do you set an even larger text size at the <kbd>lg:</kbd> breakpoint? Continue stepping up the scale."
}
]
}
]
}
Reference in New Issue View Git Blame Copy Permalink