From d32fe34530abee229d7d2146bbdbd2bceef29080 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 13 May 2025 20:02:57 +0200 Subject: [PATCH] feat: add Tailwind CSS lessons and refactor lesson configuration --- src/js/app.js | 2 +- src/lessons/{lesson-config.js => config.js} | 4 +- src/lessons/configs/tailwindcss.json | 143 ++++++++++++++++++++ 3 files changed, 147 insertions(+), 2 deletions(-) rename src/lessons/{lesson-config.js => config.js} (96%) diff --git a/src/js/app.js b/src/js/app.js index ee89c2c..1b513bf 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -1,7 +1,7 @@ import { LessonEngine } from './LessonEngine'; import { renderLesson, renderModuleList, renderLevelIndicator, showFeedback } from './renderer'; import { validateUserCode } from './validator'; -import { loadModules } from '../lessons/lesson-config'; +import { loadModules } from '../lessons/config.js'; // Main Application state const state = { diff --git a/src/lessons/lesson-config.js b/src/lessons/config.js similarity index 96% rename from src/lessons/lesson-config.js rename to src/lessons/config.js index b41d97a..d3239a2 100644 --- a/src/lessons/lesson-config.js +++ b/src/lessons/config.js @@ -6,12 +6,14 @@ import flexboxConfig from './configs/flexbox.json'; import gridConfig from './configs/grid.json'; import basicsConfig from './configs/basics.json'; +import tailwindConfig from './configs/tailwindcss.json'; // Module store const moduleStore = [ + basicsConfig, flexboxConfig, gridConfig, - basicsConfig + tailwindConfig ]; /** diff --git a/src/lessons/configs/tailwindcss.json b/src/lessons/configs/tailwindcss.json index e69de29..2ae41d7 100644 --- a/src/lessons/configs/tailwindcss.json +++ b/src/lessons/configs/tailwindcss.json @@ -0,0 +1,143 @@ +{ + "id": "tailwindcss-basics", + "title": "Tailwind CSS 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": "

Welcome to Tailwind

Tailwind makes styling easy.

", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; }", + "sandboxCSS": "", + "codePrefix": "\n

Welcome to Tailwind

\n

Tailwind makes styling easy.

", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "font-bold", + "message": "Add 'font-bold' to the heading" + }, + { + "type": "contains", + "value": "text-gray-600", + "message": "Add 'text-gray-600' 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": "
Error: Something went wrong!
", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .alert { padding: 1rem; border-radius: 0.5rem; }", + "sandboxCSS": "", + "codePrefix": "
Error: Something went wrong!
", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "bg-red-400", + "message": "Use 'bg-red-400' to set the background color" + }, + { + "type": "contains", + "value": "text-white", + "message": "Use 'text-white' 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": "", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; } .btn { background-color: #3498db; color: white; border-radius: 0.375rem; }", + "sandboxCSS": "", + "codePrefix": "\n", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "m-2", + "message": "Add 'm-2' to add spacing between the buttons" + }, + { + "type": "contains", + "value": "p-2", + "message": "Add 'p-2' 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": "", + "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": "", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "hover:bg-green-500", + "message": "Add 'hover:bg-green-500' 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": "
This is a card component.
", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1.25rem; background-color: #f3f4f6; }", + "sandboxCSS": "", + "codePrefix": "
This is a card component.
", + "codeSuffix": "", + "previewContainer": "preview-area", + "validations": [ + { + "type": "contains", + "value": "bg-white", + "message": "Use 'bg-white' for background color" + }, + { + "type": "contains", + "value": "shadow", + "message": "Use 'shadow' to add a shadow" + }, + { + "type": "contains", + "value": "rounded", + "message": "Use 'rounded' to add rounded corners" + }, + { + "type": "contains", + "value": "p-4", + "message": "Use 'p-4' for padding" + }, + { + "type": "contains", + "value": "text-center", + "message": "Use 'text-center' to center the text" + } + ] + } + ] +}