Verification Checklist

You have covered the core of Tailwind CSS and shadcn/ui. Before moving to your first project, confirm you can do each of the following. This is not a test — it is a calibration. If anything on this list feels uncertain, return to that section and spend another 10 minutes on it. The rest of the training assumes these foundations are solid.

---

Concepts — Can You Explain These?

Work through these out loud or in writing. If you can explain it clearly, you understand it.

• What is a utility class? Explain it in one sentence, then give two examples.

• What does p-4 do? What about px-6 py-3? Be specific about pixel values.

• What does md:grid-cols-2 mean? When does it apply? When doesn't it?

• What is the difference between hover:bg-blue-700 and bg-blue-700?

• Why does shadcn/ui copy component code into your project instead of giving you a package to import? What are the benefits?

• What does the cn() function do? Why is it better than plain string concatenation for Tailwind classes?

• What are CSS variables in the context of theming? Where do they live and what does changing one affect?

---

Practical Skills — Can You Do These?

Each item should take you less than 5 minutes. If it takes longer, you need more practice.

Tailwind

• Open any component in your project and add a background color, padding, and border radius using utility classes. Confirm the change is visible in the browser.

• Make a <div> display 1 column on mobile and 3 columns on desktop using grid classes.

• Add a hover state to a button so it becomes slightly darker when moused over.

• Add dark: variants to a card so it has a dark background and light text in dark mode.

• Look at any UI screenshot from a real app and name 5–10 Tailwind classes that would recreate it. (You don't need to build it — just identify the classes.)

shadcn/ui

• Run npx shadcn-ui@latest add badge and import the Badge component into a page. Render a badge with text.

• Render a Button with the destructive variant and confirm it looks different from the default variant.

• Render a Card with a title, description, some content, and a button in the footer.

• Render a Dialog that opens when a button is clicked and closes when the user clicks Cancel.

• Change the primary color of your project by updating the --primary CSS variable in index.css. Confirm the button color changes.

---

Reading Code — Understand What This Does

Read this component and answer the questions below without running it:

• What shape is the avatar container? How do you know from the classes?
• What happens to the shadow when you hover over the card?
• What prevents the name from overflowing if it's very long?
• When does the "Verified" badge appear?
• What is flex-shrink-0 preventing on the avatar?
• What does transition-shadow do?

---

Confidence Assessment

Rate your honest confidence level on each of these:

Target before your first project: Everything in "Confident" except theming (that one can be "Getting there").

---

What to Do If Something Feels Uncertain

Confused about a specific class? Go to tailwindcss.com/docs and search for it. Every class has documentation with examples.

Not sure about a shadcn component? Go to ui.shadcn.com/docs/components, find the component, and read the usage examples. They're clear and copy-paste ready.

Struggling to reproduce something you see in a design? Ask Claude: "How would I build a [describe what you see] using Tailwind CSS and shadcn/ui?" Then read the code it generates — don't just run it. Reading it once is worth ten times more than copy-pasting it.

Everything still feels overwhelming? That's normal at this stage. The key insight is: you don't need to know all of it. You need to know enough to read it and write it slowly. You will look things up constantly for the first few months. That's not a sign you haven't learned — it's how every developer works.

---

Next Module

Once you're comfortable here, you're ready to apply everything you've learned. Your first project — a personal static website — will put all of this into practice immediately.

The concepts that will click during your first project:

• Writing layouts that actually look like what you imagined
• Combining shadcn components to build full pages
• Understanding why something doesn't look right and knowing which class to change
• Customising a design to match a specific style preference

These don't fully click until you're building something real. That's the point of Project 1.