35 docs tagged with "tailwindcss"

A chapter that applies the cva, cn, Slot, and design-token patterns learned with Button to Badge, Input, Card, and Alert. We summarize a pattern-selection guide per component and design best practices.

Animation implementation with Tailwind CSS. It organizes the basics of transition / duration / ease / delay, the scale / rotate / translate / skew transforms, v4 3D transforms (perspective / rotate-x/y/z), the built-in animate-* utilities, and motion-safe/reduce accessibility, all through implementation examples.

A systematic look at backgrounds (including gradients), borders, rounded corners (border-radius), shadows, rings (focus), outlines, and dividers (divide) with Tailwind CSS. It also covers implementations of UI parts such as cards / buttons / hero sections.

Tailwind CSS's color palette (26 colors × 11 steps as of v4.2) and how to use it. It covers text / background / border / ring / opacity (the /N notation backed by color-mix) / v4's oklch color space / CSS variable integration (bg-(--my-color)) through practical examples.

Systematically implement reusable UI components (button / card / form / nav / alert / badge / tooltip / modal) with Tailwind CSS. It also organizes accessibility (ARIA attributes), so you learn production-quality patterns.

An explanation of container queries, which gained native support in Tailwind CSS v4. It organizes the `@container` declaration, the @3xs–@7xl container breakpoints, named containers, the arbitrary-value `@[500px]:` notation, and when to use them versus media queries, all through implementation examples.

Putting Tailwind CSS v4's CSS-First Configuration into practice. Define colors / fonts / spacing / breakpoints / shadows / animations in CSS with `@theme`, and implement theme extensions with `@utility` / `@custom-variant` / `@plugin` / `@layer`.

In this chapter, you learn declarative management of style variants with cva (class-variance-authority). You understand what cva does internally, including what it "does not do" (conflict resolution).

Dark mode implementation with Tailwind CSS's `dark:` variant. It covers a comparison of the three approaches (media query / class-based / selector-based), FOUC mitigation, a recommended color mapping, and centralized theme color management with CSS variables, all through implementation examples.

A chapter that explains where the color of bg-primary comes from. You learn the two layers of design tokens (primitive / semantic), OKLCH colors, token definitions with Tailwind v4's @theme inline, and how light / dark themes work.

Targets React 19 / Tailwind CSS v4 / the latest shadcn/ui. A 13-chapter guide that uses the Button to teach reusable component design aligned with a design system through design tokens, cva, cn, and Radix Slot.

A chapter on building a development environment for learning the shadcn/ui Button with Vite + React 19 + TypeScript + Tailwind CSS v4. It walks through installing cva, clsx, tailwind-merge, and radix-ui, creating the cn function, and configuring path aliases.

How to build Flexbox layouts with Tailwind CSS. From creating a flex container, it organizes flex-direction / flex-wrap / justify-content / align-items / gap / order in tables, then cements it with navigation bar / card / search form implementations.

In this chapter, you learn how to access DOM elements using ref. We focus on the new React 19 style where ref is a normal prop, and also cover the traditional forwardRef.

The final chapter that brings the design-token, cva, cn, Slot, and type patterns learned with Button into a single design system made of three layers (design tokens / primitives / patterns). It also introduces points for team operation and the next steps.

A hub for the domain that collects notes on frontend development, such as React, Tailwind CSS, and shadcn/ui. It covers UI construction, styling, and component design.

How to leverage CSS Grid with Tailwind CSS. It systematically covers grid-cols / grid-rows, col-span / row-span, place-items, grid-auto-flow, and subgrid support, then cements it with dashboard / card gallery / image grid implementations.

A hands-on exercise that starts from a plain button and stacks Tailwind design tokens, cva, cn, asChild (Slot), and TypeScript types one step at a time to complete a shadcn/ui-style Button component from scratch. It includes bonus exercises for adding a success variant and a loading state.

A chapter that digs into the internal behavior of clsx and tailwind-merge, which make up the shadcn/ui cn function, along with actual results. You learn about excluding falsy values, conflict resolution via conflict groups, and why the order is clsx then twMerge.

A practical chapter that integrates the Tailwind CSS v4 knowledge you have learned to build a SaaS landing page. You implement all of the hero / features / pricing / FAQ / CTA / footer sections, and also set up custom animations with @theme + @keyframes.

In this chapter, you learn about radix-ui's Slot and the asChild pattern. We explain the idea of "composition", which swaps the rendered HTML element while preserving the styling.

Responsive implementation with Tailwind CSS's mobile-first approach. It organizes the sm/md/lg/xl/2xl breakpoints, max-* variants, v4 custom breakpoints, and arbitrary-value bracket notation through nav / hero / footer implementation examples.

How to set up a Tailwind CSS v4 development environment in four ways — Vite / PostCSS / CLI / CDN. It covers supported-browser requirements, the VS Code extension (Tailwind CSS IntelliSense), class sorting with the Prettier plugin, and a guideline for production build size.

Systematizes element sizing (width / height / min-* / max-* / size-*), positioning (static/relative/absolute/fixed/sticky), z-index, object-fit, overflow, and aspect-ratio with Tailwind CSS. It also organizes implementation examples such as the three centering patterns, a fixed header, and a modal.

Tailwind CSS's 4px-based spacing system. It compares padding / margin / gap / space-* / logical properties (ps/pe), and organizes negative margins for full-bleed layouts and v4's arbitrary-value syntax through practical examples.

Systematically covers Tailwind CSS state variants (hover / focus / focus-visible / focus-within / active / disabled / invalid / checked), groups (group-*), peers (peer-*), pseudo-classes (first/last/odd/even), pseudo-elements (before/after), and has-*.

A chapter for using Tailwind CSS, which has become the de facto standard in React development, practically in React. Setup and basics are left to a separate guide; this chapter covers patterns specific to React integration, such as variant design, the clsx / tailwind-merge / cn utilities, and integration with shadcn/ui.

A chapter that teaches the utility-first idea of Tailwind CSS by breaking down the actual class list of the shadcn/ui Button. It explains layout, state modifiers (hover / focus-visible / disabled), the spacing scale, and an entry point into design tokens.

A systematic learning guide for Tailwind CSS v4 in 18 chapters. From the utility-first mindset to Flexbox/Grid, typography, colors, responsive design, dark mode, container queries, and animation. You build a landing page in a hands-on project and acquire modern CSS styling.

A chapter that previews the finished form of the shadcn/ui Button component you build in this book. You grasp the big picture and basic usage of the techniques in play, such as cva, cn, Radix Slot, design tokens, and React 19's ref.

The introductory chapter of a guide that teaches design system design using the shadcn/ui Button. It explains the book's goal, who it is for, the structure of all 13 chapters, and why the Button is the ideal subject for component design.

An explanation of the utility-first philosophy at the core of Tailwind CSS, compared with traditional CSS. It systematically organizes the class naming convention, the 4px-based spacing scale, and ways to address HTML bloat (componentization / @apply / @reference).

In this chapter, you learn about the TypeScript types that power the shadcn/ui Button. We cover props definitions using React.ComponentProps, VariantProps, and intersection types, and why React 19 no longer needs forwardRef generics.

How to style text with Tailwind CSS. It organizes font size (text-xs to text-6xl) / weight / family / line height / letter spacing / decoration / truncation (truncate, line-clamp) and considerations for Japanese fonts through practical examples.

The introductory chapter of this Tailwind CSS v4 guide. It covers the utility-first mindset, how it differs from traditional CSS frameworks, an overview of v4 features such as CSS-First Configuration / the Oxide engine / built-in container queries, and the structure of the whole guide.