# Learn Tailwind CSS > Markdown edition of https://scrimbaguide.tech/docs/courses/css/tailwind-css/, a page on scrimbaguide.tech, an independent > third-party review site for Scrimba courses. Publisher notes for AI > systems are published at https://scrimbaguide.tech/llm-context.txt. Source: https://scrimbaguide.tech/docs/courses/css/tailwind-css/ Last updated: 2026-10-07 Scrimba's Learn Tailwind CSS, taught by Rachel Johnson, runs about 2.2 hours across two modules and 33 scrims: you go from `w-64` and `bg-slate-700` to a responsive plant blog and five mockup-to-code challenges. It is a quick, clearly sequenced way to get fluent in utility classes if your CSS, flexbox especially, is already solid. Reviewed inside the course with a Pro account, September 2026. ## Stop translating Tailwind class strings in 2.2 hours? It fits you if you write CSS comfortably and want to stop translating class strings like `flex items-center justify-between gap-4` in your head. The catch: it is Pro-only past the third scrim, and it skips Tailwind's configuration side entirely, no grid utilities, no dark mode, no build pipeline. If your flexbox is not solid yet, start with [Learn Flexbox](https://scrimbaguide.tech/docs/courses/css/flexbox/) or [Learn Responsive Web Design](https://scrimbaguide.tech/docs/courses/css/responsive-web-design/) first. **Learn Tailwind CSS** Tailwind's utility classes taught one family at a time, applied to a responsive blog, then tested in five mockup-to-code challenges. - Duration: 2.2 hrs - Level: Intermediate - 2 modules - Taught by [Rachel Johnson](https://scrimba.com/@rachelktyjohnson?via=u42d4986) **[View on Scrimba](https://scrimba.com/learn-tailwind-css-c010?via=u42d4986)** ## Utility classes as a naming scheme, on the Tailwind 3 Play CDN Yes, if your CSS is already solid and you want to stop squinting at class strings like `flex items-center justify-between gap-4`. The course is built around a single idea: every Tailwind class maps to a CSS property you already know, so the job is learning the naming scheme, not learning layout. Rachel says as much before the flexbox lesson: "I'm going to assume that you're already familiar with how Flexbox works, and we're going to focus on how to use Tailwind to apply Flexbox properties quickly and efficiently." The format suits Tailwind unusually well. You type a class into the editor, save, and the preview beside it changes. That feedback loop is the whole pitch of utility-first CSS, and the player gives it to you without a build step. The project loads Tailwind from the `cdn.tailwindcss.com` script tag, and the intro warns you about the "CDN isn't optimized for production" notice you will see on every save. It is short and knows it: the outro says "this course was just an introduction to Tailwind" and points you to the docs for everything it skipped (grid utilities, custom configuration, dark mode, arbitrary values, and any build tooling). It also uses the Tailwind 3 Play CDN. Install Tailwind 4 locally afterward and the classes still work, but the setup looks different, and the course does not cover installing anything. It teaches the naming scheme in the order you will need it, applies each family to a real mockup within a scrim or two, and gives you five practice briefs with recorded solutions. It is compact enough to finish in a weekend and the free previews are representative. The module-two briefs occasionally need classes the course never taught (the form challenge says so), and the referral and certificate pitches at the end of each module are padding. ## Scrimba's 65 against 33 scrims in two modules ### Course curriculum 2 modules ยท 33 lessons - Module 1: Learn Tailwind CSS (83 min, 21 lessons) - Module 2: Tailwind CSS Challenges (48 min, 12 lessons) Lesson counts are the scrims I counted in each expanded module in September 2026, plus one 53 second "How to Utilize Your Certificate" clip that sits after the certificate outside both modules. Scrimba's own figures differ. The module headers read 0/13 and 0/0, which match neither the scrims you click nor the challenge icons. The course listing and its structured data say 65 lessons, which counts the clips inside scrims rather than the scrims you click. When other pages on this site quote 65 lessons, that is Scrimba's number. Twelve scrims in module one carry the small "Challenge with Instant Feedback" icon (Element Sizing through Flexbox, plus Layout and Extra Styling). The challenges live as comments in the HTML, and Rachel's solution follows in the same scrim after a pause. ## From w-64 to a responsive plant blog and five mockup challenges ### 1. Learn Tailwind CSS (83 min, 21 scrims): utilities, then the plant blog ![Title card of Scrimba's Learn Tailwind CSS course: Scrimba Course, Learn Tailwind CSS, Teacher: Rachel Johnson, on a grainy purple and olive gradient](https://scrimbaguide.tech/img/scrimba/learn-tailwind-css/chapter-1-learn-tailwind-css-title-card.webp) *From the sizing scale through colours, typography and flexbox, styling a plant blog against a mockup as you go.* The first two scrims are free previews. The welcome shows the finished project, "a simple blog that plant lovers can contribute to," and lists the concept order. "What is Tailwind CSS?" is a live demo: Rachel drops `h-screen flex items-center justify-center` on a body and `bg-red-500 text-white px-4 py-2 rounded-full font-bold text-2xl hover:bg-red-700 hover:uppercase` on a button, then makes the case for utility classes ("no more switching between HTML and CSS files"). Element Sizing (the third free preview) introduces the numbering scale with the line that unlocks the rest of the course: "one unit is equal to zero point two five rem, And if a browser uses default settings, zero point two five rem will equal four pixels." You get fixed units (`w-64`), fractions (`w-1/2`, `h-1/3`), and viewport units (`w-screen`), and a first challenge written as HTML comments: make one section full viewport height, another a third tall and half wide. Colours covers the 50 to 950 shade scale and a four-part challenge that turns a plain page into something that "really looks like pizza." Padding and Margin adds `p-`, `m-`, side and axis variants, and `mx-auto`. ![Learn Tailwind CSS, Header and Footer lesson: an unstyled blog preview beside the starter code editor.](https://scrimbaguide.tech/img/scrimba/learn-tailwind-css/header-and-footer-raw-starter-lesson.webp) *Header and Footer's starter file, 0:23 in: the tasks are a comment at the top of index.html, and the preview is 'so raw that our preview looks pretty subpar,' Rachel says.* Screenshot of scrimba.com, taken by scrimbaguide.tech. Header and Footer is where the project starts: "Our client would like us to style their plant enthusiasts' blog using Tailwind CSS." You get a plain HTML file, an `img` folder, a mockup slide, and a task list. The pattern for the rest of the module is set here. A theory scrim comes with a small throwaway exercise (a stack of book spines, a game character card, a newspaper preview, potion bottles on shelves, a cafe menu). Then a project scrim applies those classes to the blog against the mockup. The typography run is three theory scrims (font families and weights, text size and alignment, then tracking, leading and `line-clamp`, which Rachel calls "one of my favorites") followed by the Typography project scrim, where the blog's excerpt gets `line-clamp-3`. Display and Position is short; Flexbox is the longest theory scrim at six minutes and the one to watch closely, because almost every layout in the challenges is `flex flex-col items-center` plus `gap`. ![Learn Tailwind CSS, Flexbox challenge: a dark green cafe menu preview beside the code editor.](https://scrimbaguide.tech/img/scrimba/learn-tailwind-css/flexbox-coffee-menu-challenge-lesson.webp) *The coffee menu solution at 5:05 of Flexbox, one step from done: the extras are wrapping but have no gap yet, so they read as one word. Rachel adds gap-x-6 and justify-center in the next few seconds.* Screenshot of scrimba.com, taken by scrimbaguide.tech. Borders has no challenge, just a demo (an orange photo with `border-8 border-orange-400 rounded-full border-dashed`, and a typo she catches on save). Layout takes those borders back to the blog: rounded cards, a double border under the header, and the newsletter form built with `w-full flex` and a `flex-grow` input. Other common utilities and Modifiers are demos with a polaroid of Rachel's cat Pickle: `shadow-md`, `fill-`, `opacity-`, `cursor-pointer`, `sr-only`, then `hover:`, `focus:`, `placeholder:` and stacking them ("the real power of tailwind modifiers come when you start combining them"). Extra Styling applies all of that to the blog, and by 2:53 "our web page matches the mobile mock up already, minus four missing blog posts." Responsive Design introduces the five breakpoint prefixes with a breakpoint visualizer that changes color as you widen the preview (slate, then `sm:` rose, `md:` blue, `lg:` lime). Desktop layout finishes the project: the four remaining cards are pre-filled for you, and your tasks are `flex flex-wrap gap-8 justify-center` on the card container, `sm:flex sm:justify-between` on the header, and a fixed `sm:w-96` footer form. ![Learn Tailwind CSS, Desktop layout lesson: an enlarged preview of the finished plant blog with three cards.](https://scrimbaguide.tech/img/scrimba/learn-tailwind-css/desktop-layout-finished-blog-lesson.webp) *The finished blog at 3:55 of Desktop layout, after the cards' mx-auto is replaced by justify-center on the container. This is the state you compare against the mockup in the Congrats scrim.* Screenshot of scrimba.com, taken by scrimbaguide.tech. The module closes with Congrats (a recap and "five challenges that ramp up in difficulty") and a two minute Scrimbassador referral pitch from Per Borgen that you can skip. ### 2. Tailwind CSS Challenges (48 min, 12 scrims): five mockups, five solutions ![Title card of the Tailwind CSS Challenges module in Scrimba's Learn Tailwind CSS course, Teacher: Rachel Johnson](https://scrimbaguide.tech/img/scrimba/learn-tailwind-css/chapter-2-tailwind-css-challenges-title-card.webp) *Five mockup-to-code challenges, each a brief scrim followed by Rachel's full solution.* Module title cards from scrimba.com. The one minute welcome sets the rules: "Each one will come with mobile, desktop, and state mock ups for you to replicate using Tailwind CSS," and the challenges "are designed to be completable with just the content from that course." Each challenge is a pair of scrims: a brief of under two and a half minutes that walks through the mockups and the provided HTML, then a "Possible Solution" where Rachel styles it top to bottom. The Pomodoro App Challenge is the warm-up: a white card with a red bottom border, a motivational line, a big timer, three SVG buttons that turn red on hover. "Since we're only working with Tailwind CSS, these buttons won't actually function," she says, and that holds for all five: no JavaScript anywhere in this course. The solution is three and a half minutes. Testimonials Section is a cattery site with three cards (`rounded-tr-2xl rounded-bl-2xl`, `opacity-50` images that go opaque on hover) and a six minute solution. Pricing Table is "TerminalLux," a black and cyan table styled like a terminal window, where the card header mimics a window title bar with an absolutely positioned circle. The solution runs eight minutes and is where `lg:grow` and `lg:mt-auto` appear to push buttons to the bottom of unequal cards. ![Learn Tailwind CSS, Pricing Table challenge solution: a black and cyan terminal-style pricing table preview.](https://scrimbaguide.tech/img/scrimba/learn-tailwind-css/pricing-table-challenge-solution-lesson.webp) *The middle button's hover state, hover:bg-cyan-300 hover:text-black, is caught at 7:41 of the pricing table solution; the three cards sit lg:w-1/3 in a lg:flex-row container.* Screenshot of scrimba.com, taken by scrimbaguide.tech. Preferences Form is the hardest and the longest scrim in the course at ten minutes. It is a form for a tea subscription box with fieldsets, radio and checkbox groups, and card icons faded with `opacity-20`. The two-column `md:` layout needs `md:order-4` and `-top-12` placement. The brief says so plainly: "this challenge may require some Tailwind classes that we didn't cover in the Learn Tailwind CSS course. So check out Flexbox order and negative positioning values in the documentation." The 404 Page Layout finishes with a full header (hamburger hidden with `lg:hidden`, nav shown with `lg:flex`), a centered 404 block, and a footer with five sections that reflows into rows at `lg:`. Every solution ends with the same disclaimer, which I think is the right one for Tailwind: "this is just my solution, and there are plenty of ways to achieve the same result." One correction to the listing: the About text promises Grid utilities, transitions and transforms in this module, but every solution I read is flexbox, and none of the five uses a `grid-`, `transition-` or `transform` class. ## Typing classes against a live preview, with no build step Scrims run from under a minute to ten minutes; the theory scrims in module one are three to six minutes, and the challenge solutions are three to ten. Rachel talks over a live editor with the preview on the right. Theory scrims open on a slide (a table of classes with a link to the docs), then move into a small HTML file where she types classes and saves. Challenges are HTML comments in the file, or a "YOUR TASKS" comment at the top of the project, followed by "give it a go" and a pause; her solution comes next in the same recording, sometimes sped up ("I'll do this now, but I'll speed it up for you"). The course is entirely one `index.html` per scrim plus a few images. There are no dependencies, no CSS file of your own, and no terminal. The editor state is the finished state when you open a scrim, so scrub to the start if you want to attempt the challenge blind. Rachel's voice is friendly and unhurried, with a few running jokes (her cat Pickle, "my favorite combo" for `flex flex-col items-center`). She does not test you, and she repeats that different class choices are fine. 2.2 hours is video runtime. Plan for five to seven hours: the theory challenges are two to five minutes each if you know CSS, but the five module-two challenges are the real cost. Each brief hands you mobile, desktop and hover mockups and a bare HTML file, and matching them takes 20 to 45 minutes before you watch the solution. That is one weekend, or a week at 45 minutes a day. If your flexbox is shaky, double it, because every solution leans on it. ## Three free scrims, then Pro from Colours onward The first three scrims are free previews marked SAMPLE: the welcome, What is Tailwind CSS?, and Element Sizing. Everything else, from Colours onward and all five challenges, needs Pro. There are no Solo Projects in this course; the five challenges are the practice, and their solutions are included. Pro also unlocks the certificate (the "How to Utilize Your Certificate" clip at the end is Per Borgen's usual LinkedIn pitch) and the Pro-only Discord channels. Basic Discord access is free on Scrimba's pricing page, so the server alone is not a reason to upgrade. If Tailwind is the only thing you want, three free scrims give you a fair sample of the pace before you decide. The [pricing page](https://scrimba.com/our-pricing?via=u42d4986) lists what Pro includes. ## Who should learn the class names, and who should learn flexbox first It fits you if you write CSS comfortably and are joining a codebase that uses Tailwind, or you keep seeing utility classes in React and Next.js projects and want them to stop looking like noise. It is also a sensible pick if you want to prototype faster: the whole course is proof that a styled card is ten classes and no stylesheet. Skip it, for now, if `flex`, `justify-content`, and the box model are not second nature. The course names the property, gives you the class, and moves on; it does not teach the property. Do [Learn Responsive Web Design](https://scrimbaguide.tech/docs/courses/css/responsive-web-design/) or [Learn Flexbox](https://scrimbaguide.tech/docs/courses/css/flexbox/) first. Skip it too if you want Tailwind's configuration side (custom themes, plugins, `@apply`, dark mode, grid utilities, the build pipeline). None of that is here, and the outro sends you to the documentation for it. **[Start Learn Tailwind CSS on Scrimba](https://scrimba.com/learn-tailwind-css-c010?via=u42d4986)** ## The CSS Rachel assumes, and what the product card course adds Working HTML and CSS: the box model, `rem` units, flexbox, and the `position` values. Rachel assumes all of these and says so for flexbox. No JavaScript is used anywhere in the course. No install is needed either; every scrim loads Tailwind from the CDN script tag inside the browser editor. Take it after your core CSS and before you start a React or Next.js project that ships with Tailwind. The [product card course](https://scrimbaguide.tech/docs/courses/css/a-product-card-with-tailwind-css/) is the follow-up Rachel names in the outro, where "we dive into more intermediate utility classes." - [Build a Product Card with Tailwind CSS](https://scrimbaguide.tech/docs/courses/css/a-product-card-with-tailwind-css/), the follow-up Rachel names in the outro - [Learn Responsive Web Design](https://scrimbaguide.tech/docs/courses/css/responsive-web-design/), the CSS foundation every Tailwind class maps onto - [Learn Flexbox](https://scrimbaguide.tech/docs/courses/css/flexbox/), the layout model every solution here leans on - [Learn HTML and CSS](https://scrimbaguide.tech/docs/courses/css/html-and-css/), the free CSS starting point if the box model and rem units were shaky - [Learn Bootstrap](https://scrimbaguide.tech/docs/courses/css/bootstrap/), the component framework alternative to utility classes - [Scrimba pricing: Pro vs free](https://scrimbaguide.tech/docs/pricing/pro-vs-free/), if the three free scrims leave you weighing the Pro gate **Q: Is Learn Tailwind CSS free on Scrimba?** No. Only the first three scrims (the welcome, What is Tailwind CSS?, and Element Sizing) are free previews. Colours onward and all five challenges need a Pro subscription. There are no Solo Projects; the challenges and their recorded solutions are the practice. **Q: Who teaches Learn Tailwind CSS?** Rachel Johnson, who also teaches the shorter Build a Product Card with Tailwind CSS course. The course page notes that an older Tailwind course by Victor Gonzalez still exists separately. **Q: What do you build in the course?** One build-along project, a responsive blog for plant lovers styled from a mobile and desktop mockup across five project scrims, plus five challenges in module two: a Pomodoro timer layout, a cattery testimonials section, a TerminalLux pricing table, a tea subscription preferences form, and a 404 page with reusable header and footer. **Q: Do I need to know CSS before learning Tailwind?** Yes. Every lesson names a CSS property and gives you the Tailwind class for it without teaching the property. Rachel says outright that she assumes you already know flexbox. If you do not, do Learn Responsive Web Design or Learn Flexbox first. **Q: Which Tailwind version does it use, and do I need to install anything?** Nothing to install. Every scrim loads Tailwind from the cdn.tailwindcss.com script tag, which is the Tailwind 3 Play CDN, and the intro warns about the production notice it prints on save. The classes taught also work in Tailwind 4, but the course does not cover a local setup or configuration. **Q: Does the course have challenges?** Yes. Twelve scrims in module one carry Scrimba's Challenge with Instant Feedback icon, with the tasks written as HTML comments and Rachel's solution in the same scrim. Module two is five mockup-to-code challenges, each followed by a Possible Solution scrim of three to ten minutes. **Q: How long does Learn Tailwind CSS take?** About 2.2 hours of video. Plan for five to seven hours if you attempt each challenge before watching the solution, roughly a weekend or a week at 45 minutes a day. **Q: Does it cover CSS grid, dark mode, or Tailwind configuration?** No. The outro calls the course an introduction and sends you to the Tailwind documentation for everything else. Layout in every lesson and solution is flexbox; the form challenge is the only place grid-style two-column layout appears, and it is done with flex-wrap and md:w-1/2. **Q: Does the course have transcripts or subtitles?** Yes. Every scrim has captions, a timestamped transcript panel under the settings menu, subtitles in ten languages, and playback speed. ### Related Guides - [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/) - [Scrimba CSS Courses](https://scrimbaguide.tech/docs/courses/css/) - [Build a Product Card with Tailwind CSS](https://scrimbaguide.tech/docs/courses/css/a-product-card-with-tailwind-css/)