Tailwind CSS V4 (+ React) - The beginner guide

Learn tailwind utilities by creating three colored squares using height and width utilities and bg color utilities like green-500. Write className in React and reuse styles.

Explore the display property in CSS and how Tailwind uses it, detailing block, inline, inline-block, none, invisible, and hidden, and how height and width behave for each.

Explore the Tailwind flex box system to position elements with flex, flex-col, justify, and align-items, including responsive tweaks like h-screen. Build layouts with the grid system using grid and grid-cols-3.

Discover how Tailwind enables responsive design using mobile-first breakpoints such as sm, md, lg, xl, and 2xl to control visibility, text size, and layout.

Learn how Tailwind CSS states modify utilities for hover, focus, and active interactions, with practical examples of color, margin, padding, and responsive breakpoints.

Demonstrate how to use Tailwind's group and peer utilities to style children based on the parent's hover state or named peers, and reorder elements with flex for a proper layout.

Learn how to use custom values and themes in Tailwind CSS, create and reuse palette colors like mint, define CSS variables, and extend theme with spacing and color keys.

Learn how Tailwind CSS uses base, components, and utilities directives to reset browser styles, customize default text, and build reusable components with apply and layer directives.

Toggle dark mode with tailwind by applying the dark utility, enabling dark in the config, and programmatically toggling the html root's dark class to update colors and shadows.

Access and bookmark the Tailwind css shoes repository, choose the correct video branch (such as 15 dark mode), and clone, install dependencies, and run the project to test code.

Set up tailwind with a vite-based react project, choosing your package manager and JavaScript setup. Configure tailwind in vite, import it in main css, and run on port 3000.

Install three development libraries—prettier, prettier plugin css, and vite plugin svgr—to display svg s and enable on-save formatting; configure vite, enable format on save, and restart the project.

Build a responsive header by creating a nav component, displaying a Nike logo SVG, and a hamburger icon button with react-icons in a vite project, using flex and focus styles.

Map a routes array in React to render a Tailwind-styled nav list, with responsive flex wrap, borders, padding, hover effects, and a special first-item blue background.

Explore building a responsive mobile menu with show-hide toggling, a bottom-left cart button, and layout shifts from vertical on mobile to horizontal on large screens using Tailwind and React state.

Build a responsive shoe detail component with tailwind css and react, featuring image, title, description, price, add-to-bag button, and view-details link in a reverse flex layout on large screens.

apply a diagonal gradient from top-left to bottom-right with color stops at #f637cf, #e3d876, and #4cc4c6, and load nunito sans via font source, applying it to the body.

Learn to build a responsive gradient in Tailwind CSS for a React app, centering the image, applying desktop hover effects, and fine-tuning margins and colors.

Build a reusable select component in React by mapping options from constants, with a placeholder title, then use it for size and quantity in the shoe detail.

Create CSS animations with keyframes, defining wiggle and float effects using rotate, translate, and opacity, and control duration, ease in out, and infinite or single runs.

Build a reusable bottom card component in React with Tailwind, featuring hover grow, a title, an underlined shop now link, an image, and data-driven styling via a shoes array.

Discover why tailwind forbids constructing class names dynamically and how this affects color-based bg classes. Always pass a plain class name and avoid color variables for reliable styling.

Build a responsive card grid in React with Tailwind CSS by mapping items to a card component in a new arrivals section that adapts from one to three columns.

Learn to build an animated React sidebar with Tailwind, featuring an overlay, open/close state, and responsive widths for mobile and desktop, using isOpen and a sidebar component.

Build a responsive cart item component in JSX with fake data, displaying image, title, description, and price, and ensure horizontal layout, hover feedback, and scrollable sidebar.

Learn how to build a cart item inputs section with Tailwind CSS and React, using size and quantity selects, a trash icon button, and a responsive flex layout.

Learn how tailwind merge enables overriding existing styles by accepting a class name prop, installing and using the tw-merge library to resolve CSS precedence.

Build a React and Tailwind cart, attach size and quantity to items, and render them from a fake cart array. Set up the cart component and prepare dark mode.

Implement a persistent dark mode in a Tailwind CSS React app using a bottom-right toggle button, toggling the dark class, and storing the state in local storage.

Master dark mode styling in a Tailwind CSS React project by toggling background and text colors, adjusting SVG fill, and refining nav, cart, and labels.

Make the shoe detail dynamic by clicking a card to set the current shoe and render its title, price, description, and image with React state.

Learn to add items to a cart with size and quantity validation, update existing items, and manage cart state in React for a Tailwind CSS plus React course.

Learn to remove items from a shopping cart in React by identifying the product ID, updating the cart array with splice, and wiring trash icon clicks to update state.

Deploy your Tailwind plus React app with Vercel by importing your GitHub project, running npm install and npm run build, and viewing a live preview.