code-crispies/lessons/tailwindcss.json

{
	"$schema": "../schemas/code-crispies-module-schema.json",
	"id": "tailwindcss-basics",
	"title": "TW Basics",
	"description": "Learn how to use Tailwind CSS utility classes to quickly style your HTML elements",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "tw-1",
			"title": "Text and Font Weight",
			"description": "Tailwind provides utility classes to style text appearance, like size and weight.",
			"task": "Make the heading bold and the paragraph text gray using Tailwind classes.",
			"previewHTML": "<h1 class='heading'>Welcome to Tailwind</h1><p class='description'>Tailwind makes styling easy.</p>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; }",
			"sandboxCSS": "",
			"codePrefix": "<!-- Add Tailwind classes to these elements -->\n<h1 class=\"heading",
			"initialCode": "\">Welcome to Tailwind</h1>\n<p class=\"description\">Tailwind makes styling easy.</p>",
			"codeSuffix": "",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "font-bold",
					"message": "Add <kbd>font-bold</kbd> to the heading"
				},
				{
					"type": "contains",
					"value": "text-gray-600",
					"message": "Add <kbd>text-gray-600</kbd> to the paragraph"
				}
			]
		},
		{
			"id": "tw-2",
			"title": "Background Colors",
			"description": "Use Tailwind background utility classes like bg-red-400 to style element backgrounds.",
			"task": "Apply a red background to the alert box and make the text white.",
			"previewHTML": "<div class='alert'>Error: Something went wrong!</div>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .alert { padding: 1rem; border-radius: 0.5rem; }",
			"sandboxCSS": "",
			"codePrefix": "<div class=\"alert",
			"initialCode": "\">Error: Something went wrong!</div>",
			"codeSuffix": "",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "bg-red-400",
					"message": "Use <kbd>bg-red-400</kbd> to set the background color"
				},
				{
					"type": "contains",
					"value": "text-white",
					"message": "Use <kbd>text-white</kbd> for the text color"
				}
			]
		},
		{
			"id": "tw-3",
			"title": "Spacing with Margin and Padding",
			"description": "Tailwind provides spacing utilities such as 'm-' for margin and 'p-' for padding.",
			"task": "Add margin between the buttons and padding inside them.",
			"previewHTML": "<button class='btn'>Accept</button><button class='btn'>Decline</button>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .btn { background-color: #3498db; color: white; border-radius: 0.375rem; }",
			"sandboxCSS": "",
			"codePrefix": "<button class=\"btn",
			"initialCode": "\">Accept</button>\n<button class=\"btn\">Decline</button>",
			"codeSuffix": "",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "m-2",
					"message": "Add <kbd>m-2</kbd> to add spacing between the buttons"
				},
				{
					"type": "contains",
					"value": "p-2",
					"message": "Add <kbd>p-2</kbd> for internal button padding"
				}
			]
		},
		{
			"id": "tw-4",
			"title": "Using Hover Variants",
			"description": "Tailwind makes it easy to add hover styles using the 'hover:' prefix.",
			"task": "Add a hover effect that changes the background color of the button to green.",
			"previewHTML": "<button class='action'>Hover me!</button>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .action { padding: 0.75rem 1.25rem; border-radius: 0.5rem; background-color: #ccc; color: #000; }",
			"sandboxCSS": "",
			"codePrefix": "<button class=\"action",
			"initialCode": "\">Hover me!</button>",
			"codeSuffix": "",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "hover:bg-green-500",
					"message": "Add <kbd>hover:bg-green-500</kbd> to change background color on hover"
				}
			]
		},
		{
			"id": "tw-5",
			"title": "Combining Multiple Classes",
			"description": "You can combine multiple Tailwind utilities to quickly build components.",
			"task": "Style the card with a white background, shadow, rounded corners, padding, and center-aligned text.",
			"previewHTML": "<div class='card'>This is a card component.</div>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; background-color: #f3f4f6; }",
			"sandboxCSS": "",
			"codePrefix": "<div class=\"card",
			"initialCode": "\">This is a card component.</div>",
			"codeSuffix": "",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "bg-white",
					"message": "Use <kbd>bg-white</kbd> for background color"
				},
				{
					"type": "contains",
					"value": "shadow",
					"message": "Use <kbd>shadow</kbd> to add a shadow"
				},
				{
					"type": "contains",
					"value": "rounded",
					"message": "Use <kbd>rounded</kbd> to add rounded corners"
				},
				{
					"type": "contains",
					"value": "p-4",
					"message": "Use <kbd>p-4</kbd> for padding"
				},
				{
					"type": "contains",
					"value": "text-center",
					"message": "Use <kbd>text-center</kbd> to center the text"
				}
			]
		}
	]
}