Skip to main content

Practice Tailwind CSS

Scrimba teaches Tailwind by having you compose utility classes in the browser player, so flex, grid-cols-3, and hover: variants stick because you shipped a real component with them, not because you skimmed the docs.

Who This Is For​

Developers who know some CSS and want to build production UIs faster with utility classes instead of hand-writing and maintaining separate stylesheets.

Why Practice Tailwind on Scrimba?​

  1. Visual feedback, Tailwind classes render as you type
  2. Pause and experiment, try other utility classes without breaking the lesson
  3. Real components, cards, navbars, and layouts
  4. No config needed, Tailwind is loaded in the browser

Top Courses to Practice Tailwind CSS​

Build a Product Card with Tailwind CSS​

Level: Intermediate | Duration: 1.3 hrs | Access: Pro

Ten tasks on one card by Rachel Johnson: a config.js with custom oranges and fonts, gradient buttons, list markers, a md: two-column grid, an arbitrary-value shadow. The opening recap assumes the basics; Rachel points newcomers to Learn Tailwind CSS first. Four scrims free, the other 19 Pro.

Learn CSS Grid​

Level: Intermediate | Duration: 1.1 hrs | Access: Pro

The spec behind grid-cols-*, gap-*, and place-items-*. Per Borgen's 17 scrims go from fr units and repeat() to auto-fit with minmax(), the pattern Challenge 2 approximates with breakpoint classes. First three scrims free.

Learn Flexbox​

Level: Intermediate | Duration: 53 min | Access: Pro

Tailwind's flex, items-center, justify-between classes map directly to flexbox properties. The bonus responsive navbar scrim, where a media query wraps the items and order drops the search box to the bottom, is Challenge 1 in plain CSS. First four scrims free, the other 11 Pro.

CSS Challenges​

Duration: 2.6 hrs | Access: Pro

Target designs to replicate in plain CSS, not Tailwind: a gradient-border button that flips on hover (Challenge 4's cousin), a pure-CSS toggle, seven flags sized by aspect ratio, a Jeopardy card flip. Treasure Porth's solution follows each brief. The first 11 scrims, five complete challenges, are free; the other 43 are Pro.

Tailwind Practice Challenges​

Challenge 1: Responsive Navbar​

Build a navigation bar that collapses to a hamburger menu on mobile. Practice: flex, hidden, md:flex, space-x-4.

Challenge 2: Card Grid​

Create a responsive grid of cards that shows 1 column on mobile, 2 on tablet, 3 on desktop. Practice: grid, grid-cols-1, md:grid-cols-2, lg:grid-cols-3, gap-6.

Challenge 3: Dark Mode Toggle​

Style a component that switches between light and dark themes. Practice: dark:bg-gray-800, dark:text-white, and the dark variant.

Challenge 4: Animated Button​

Create a button with hover effects and transitions. Practice: hover:bg-blue-600, transition-colors, duration-200, transform, hover:scale-105.

How to Practice Effectively​

  1. Rebuild existing designs, take a design you like and rebuild it with Tailwind
  2. Use the docs as a cheat sheet, keep tailwindcss.com/docs open
  3. Start mobile-first, style the mobile view, then add md: and lg: breakpoints
  4. Extract components, once you repeat the same class combinations

Choose This If​

You want to practice Tailwind by building real components (cards, navbars, responsive grids) inside interactive scrims. The product-card build and CSS challenges require Pro.

Style faster with Tailwind scrims

Start free on Scrimba, then add Pro for the Tailwind product-card build and CSS challenges.

Try Scrimba free (opens in a new tab)

Related Guides

Next step

Practice Guides

Docs
Last updated on