Tailwind CSS From Scratch | Learn By Building Projects

Explore utility-first fundamentals with Tailwind, building complex components from primitive utilities and testing UI quickly by recreating a tailored alert box using flexbox, padding, colors, and shadows.

Explore Tailwind's color system across text, background, borders, and decorations with shade scales from 50 to 900. Use accent colors, dividers, outlines, shadows, and colors including hex values and names.

Explore the container class and spacing utilities in Tailwind, including margin and padding, breakpoints and max widths, and space between with space-x and space-y.

Explore typography in Tailwind by applying font families (sans, serif, mono), adjusting font sizes, weights, tracking, alignment, decoration, and text transforms, and learn to customize fonts via config.

Master Tailwind CSS sizing with width classes from w-0 to w-full. Explore w-screen, w-1/4, max-w-small, 300px, then height options h-24 to h-screen.

See how relative and absolute positioning place elements in corners and edges, including top, bottom, left, and right. Learn display classes like block, inline, and hidden, plus z-index and inset.

Explore tailwind background utilities for images, gradients, and shadows—cover, center, no-repeat, color stops, direction, mix-blend multiply, and negative margins for layered effects.

Explore borders and border radius in Tailwind by applying thickness, side-specific borders, colors, and various radii, then use outlines with color, width, and offset for polished UI.

Learn to apply CSS filter utilities to images and text—blur, brightness, contrast, grayscale, invert, sepia, and rotate—then explore hover and active states, media queries, breakpoints, and flexbox/grid layouts.

Explore Tailwind CSS interactivity through hover, focus, and active states, cursor styles, group hover, and pseudo-classes like first, odd, and even, plus appearance none and smooth scrolling.

Explore how Tailwind breakpoint classes enable responsive styles across small to extra large screens, including mobile-first defaults. See how to adjust text sizes and background colors at each breakpoint.

Explore Tailwind CSS column utilities to build multi-column layouts, adjust column count, width, and gaps, and enable responsive stacking with aspect video and square classes.

Explore Tailwind flexbox utilities to build responsive layouts: flex directions, breakpoint-based row and column shifts, alignment and justification, wrapping, gaps, and flexible item sizing with order and grow shrink controls.

Master Tailwind grid fundamentals by using grid, grid template columns and rows, gap, and column and row spanning, with responsive md breakpoints for stacked layouts.

Explore Tailwind's transition and transform utilities for hover effects, color transitions, and 2d transforms like rotate, scale, translate, and skew.

Explore Tailwind CSS animation classes such as spin, ping, pulse, and bounce, and learn to create custom keyframes like wiggle in the Tailwind config to build smooth, reusable animations.

Configure tailwind with a config object in a cdn workflow, customizing screens, fonts, colors, spacing, borders, and extending or replacing defaults to tailor styles.

Explore how to implement dark mode in Tailwind CSS using OS-based and class-based toggles, with practical HTML, CSS, and JavaScript to switch between dark and light modes.

Create a Tailwind CSS environment with the CLI by installing Tailwind as a dev dependency, generating a Tailwind config, configuring content to watch the root, and building or watching CSS.

Explore tailwind directives and functions, including layer, base, components, and apply, then master theme and screen functions to configure spacing, custom classes, and responsive styles.

Learn to create a webpack and postcss environment to build tailwind projects, enabling multiple JavaScript files, npm modules, and a dev server with hot reloading.

Explore five mini Tailwind CSS projects in the course repo, including email subscribe, pricing cards, product modal, image gallery, and login modal with responsive layouts and hover effects.

Build a responsive email subscribe card with tailwind css, using a mobile-first flex layout, image and content side by side on md screens, with hover effects and input styling.

Build a three-column pricing cards layout with Tailwind CSS, mobile-first and responsive at medium screens, featuring header, price, features with check icons, and a violet hover button.

Build a responsive product modal card using Tailwind CSS flex layouts, image hover effects, a stock indicator, and add-to-cart and add-to-wishlist buttons with group hover and animations.

Create an image gallery interface using a flexbox menu and a responsive grid of images. Implement hover overlays with title and likes, plus a search and upload control.

Build a responsive login modal using Tailwind CSS from scratch, featuring a left content panel, a right image on larger screens, font configuration, and social login buttons.

Create a clean clipboard app landing page with a hero, mobile and desktop backgrounds, a logo, download buttons, and a flexbox layout that stacks on small screens using apply directives.

Set up clipboard project with the Simple Tailwind starter, copy assets, configure breaks, colors, and the Be a Jam Jury font, then run npm install and npm run watch.

Build a responsive hero section with Tailwind directives, a centered logo, headline, and background image integration using flexbox and custom colors.

Organize the snippets section in a Tailwind CSS project by applying a section-container, centering text, and using layer base and apply directives to streamline H3 and button styles.

Build a features section with an image and an item list using a responsive flex layout that becomes a row on medium screens, highlighting quick search, iCloud sync, and history.

Master a responsive Tailwind CSS supercharge section featuring three items in a row on large screens, logos, and cohesive section styling with a reusable container.

Learn to build a responsive references section and footer with Tailwind CSS from scratch, using flexbox to align logos, and a bottom call-to-action, menus, and social icons with hover effects.

Deploy to Netlify demonstrates linking a git repository, pushing to GitHub, and enabling continuous deployment with Netlify's free tier and optional serverless functions.

Learn Tailwind CSS by building a Loop Studios page with a header, hero, gradient gallery with hover effects, and a responsive hamburger menu that becomes an X on small screens.

Set up Loop Studios tailwind project importing simple starter and adding mobile and desktop images. Run npm install and npm run watch; load google fonts Josie Finn and A Lada.

Master building a responsive hero with a desktop navigation using Tailwind CSS, including a flex nav with logo, hover borders, background images, and planned mobile hamburger.

Design a feature section using Tailwind CSS by arranging an image, heading, and text in a container that stacks on small screens and becomes a flex row on medium screens.

Build a responsive creations section with gradient overlays and hover effects using utility classes, featuring desktop and mobile image variants, a top and bottom button, and a reusable btn class.

Build a responsive Tailwind CSS footer with a black background, logo, menu, social icons, and copyright, stacking on small screens and laying out side by side on medium screens.

Learn to build a responsive mobile hamburger menu with Tailwind CSS and a small JavaScript toggle, turning three lines into an animated X for navigation.

Build a responsive mobile menu with Tailwind CSS by toggling an open class to morph the hamburger into an X and reveal the full-screen menu from hidden to flex.

Deploy your Loop Studios project to Vercel by pushing to GitHub, creating a private repo, and importing the project in Vercel, configuring the build output, then going live.

Design a mobile-friendly short-link UI with a header, hero, and form validation, showcasing a responsive desktop-to-mobile layout, login and signup options, and a footer with social icons.

Set up the shortly project from a Tailwind starter, rename files, bring assets, extend Tailwind colors and fonts (Poppins), extend spacing to 180, then run npm watch and open index.html.

Explore building a responsive navbar with Tailwind, featuring a logo, left menu, right action buttons, and a hamburger menu that appears at small screens and a large breakpoint layout.

Build a Tailwind hero with text left and image right, reversing to image on top on small screens, featuring heading 'More than just shorter links' and a get started button.

Build a responsive shortened section with a form and three result items beneath it, featuring a shortened link and copy button, plus plan to validate input with JavaScript.

Learn to implement JavaScript-driven link validation in a form, preventing submission, validating URLs with a regex, and displaying dynamic error messages and a red border.

Build responsive feature boxes in tailwind css from scratch, using icons, horizontal and vertical lines, and offset layouts across breakpoints to showcase brand recognition, detailed records, and fully customizable features.

learn to build a Tailwind CSS call-to-action and footer from scratch, using flexbox layouts, background images, a cyan call-to-action button, and a multi-column footer with social icons.

Create a responsive mobile menu with a hamburger button that morphs into an X and toggles an open, hidden menu via JavaScript.

Learn when to use flexbox versus grid in Tailwind by building a testimonial grid, applying grid spans, and using the line clamp plugin to truncate text.

Set up a Tailwind project from scratch, configure custom screens, and integrate the Barlow Semi Condensed font via Google Fonts while preparing card components before building a responsive grid.

Build the first testimonial box in a gray-200 container with a relative card and an absolutely positioned quote SVG, featuring Danielle Clifford and the verified graduate label.

Use a single template to create multiple responsive feature boxes in Tailwind CSS, removing unnecessary quotes and z-index classes, swapping backgrounds, images, and names, and applying grid gap for spacing.

Master responsive card layouts with Tailwind grid: define columns and rows, span items across columns or rows, and control visibility at medium breakpoints to create dynamic grids.

Install and configure the line clamp plugin for Tailwind CSS to truncate long text, then apply line clamp utilities (1–5 lines) in your project via npm and the config file.

In this project intro, you build a dropbox-style landing page called Fei Lo and implement a light/dark mode switcher saved in local storage.

Set up a Tailwind project by copying the starter, renaming the config, and extending it with custom colors, fonts, and dark/light background image classes for logo and curvy graphics.

Design a responsive header with dark and light modes using Tailwind-like classes, featuring a dynamic logo, a menu, and a theme toggle with hover and focus styles.

Learn to implement a JavaScript dark mode toggle, inline in head, that shows sun or moon SVG, saves the option to local storage, and toggles HTML dark class.

Design and implement a responsive hero section with a dynamic image that adapts to light and dark modes, using Tailwind classes to control layout, typography, spacing, and a call-to-action button.

Build a responsive features section with two rows of icon items using flex, then a stay productive section with a left image and right text that adapts across devices.

Build a responsive testimonials section with three side-by-side quotes, avatars, and author details using Tailwind CSS, plus an early access email form for user signups.

Implement a smooth scroll navigation and a dark blue responsive footer with Tailwind CSS. Include contact info, menus, and social icons with hover effects.