Styling at Scale & Design Systems

Why this stage matters

In a team, CSS is a shared system, not a single file. You need a styling approach that scales, components that stay consistent, and the vocabulary to work with designers in Figma.

What to learn

1. Must know

   Tailwind CSS

   Mark as done

   Utility-first styling, theming with CSS variables in Tailwind v4, responsive and state variants, and keeping class lists readable.

   You're done when

   • You can define a design token in Tailwind's theme and use it everywhere.
   • You extract repeated patterns into components, not @apply soup.

   Resources

   • Tailwind CSS DocsDocs
2. Must know

   Component Libraries & Headless UI

   Mark as done

   shadcn/ui, Radix, React Aria, Angular Material and the Angular CDK, or Vuetify: when to use one, and why headless libraries handle accessibility for you.

   You're done when

   • You can explain the difference between a styled library and a headless one.

   Resources

   • shadcn/uiDocs
   • Angular CDKDocs
3. Learn next

   Design Systems & Figma Handoff

   Mark as done

   Tokens for colour, spacing, and type; component APIs and variants; documenting with Storybook; and reading Figma auto layout and variables.

   You're done when

   • You can turn a Figma design into tokens and components, not one-off styles.
   • You have documented components in Storybook.

   Resources

   • StorybookDocs

Common mistakes

• Mixing three styling approaches in one project.
• Copying a component library and never learning the CSS underneath.