Tailwind CSS Long-Term Reference for Dioxus Developers

Tailwind + Dioxus

Design system notes you can keep open for years

This page is meant to be a long-term companion: a compact docs site, class cheat sheet, and pattern library. It focuses on the classes you will actually use when building responsive Rust UIs with Tailwind in Dioxus.

How to read this guide

Look for the pattern: what the class does and why it helps responsiveness. That is the real skill. Once you understand the pattern, Tailwind classes become a language instead of a list.

Best default layout habit

Use w-full to let the element breathe on mobile, then cap it with max-w-* and center with mx-auto. That trio handles a surprising amount of UI.

Design principles that matter most

Tailwind is easiest to learn when you stop thinking in terms of "custom CSS first" and start thinking in terms of layout intent. The goal is not to memorize every class; the goal is to recognize patterns like center a card, stack on mobile and row on desktop, or fill leftover space.

This guide is written for Dioxus developers, so the examples use rsx! and the HTML attribute style that Dioxus expects.

Class / Pattern	What it does	Why it matters	Dioxus mental model
`w-full + max-w-*`	Makes content fluid but limits the maximum width.	Best default for centered content and forms.	A container that fills small screens and stays readable on desktop.
`mx-auto`	Centers a block-level element horizontally.	Keeps cards and forms centered without extra wrappers.	Useful for outer shells, not inner text alignment.
`flex`	Turns a container into a flex layout.	Lets children align, distribute, and grow/shrink.	Ideal for one-dimensional layouts.
`grid`	Turns a container into CSS Grid.	Best for two-dimensional layouts.	Ideal for dashboards and card galleries.
`md:` and up	Applies a utility only at medium screens and larger.	Mobile-first responsiveness becomes simple and predictable.	Use unprefixed utilities for mobile, then override later.

div {
    class: "mx-auto w-full max-w-md px-5 flex flex-col gap-6"
}

Layout and display

These utilities decide how an element participates in layout: block flow, flex flow, grid, visibility, and width behavior.

Class	What it does	Why it helps	Typical Dioxus use
`block`	Makes the element take the full line.	Useful for links, buttons, and stacking content.	Form sections, card wrappers.
`inline-block`	Acts like inline text but supports width/height.	Good for badges and labels.	Status chips, small UI pills.
`hidden`	Removes the element from layout.	Common for toggles and mobile/desktop swaps.	Conditional rendering shell.
`flex`	Enables flexbox layout.	Great for aligning items on one axis.	Navbars, toolbars, auth pages.
`inline-flex`	Flexbox but inline-level.	Useful for buttons and chips.	Button groups, icon labels.
`grid`	Enables CSS Grid.	Excellent for complex page structure.	Dashboards, card sections.
`container`	Enables Tailwind’s container class.	Useful for consistent max-width page shells.	Article pages, marketing pages.
`contents`	Makes the element disappear as a box.	Lets children participate directly in the parent layout.	Advanced composition patterns.
`isolate`	Creates a new stacking context.	Prevents z-index surprises.	Modals, overlays, dropdown roots.
`sr-only`	Visually hides but keeps for screen readers.	Accessibility helper.	Labels, assistive text.

div {
    class: "w-full max-w-3xl mx-auto px-4"
}

Flexbox essentials

Flexbox is the best tool for one-direction layouts: rows, columns, toolbars, cards, and alignment. In Tailwind, the most important concept is not the container alone, but how the children behave inside it.

Class	What it does	When to use it	Reasoning
`flex-row`	Places children horizontally.	Navbars, button rows.	Default row flow when items should sit side by side.
`flex-col`	Places children vertically.	Forms, cards, sidebars.	Mobile-first stack pattern.
`flex-row-reverse`	Reverses horizontal order.	Special visual ordering cases.	Useful when a layout changes direction responsively.
`flex-wrap`	Allows children to wrap to the next line.	Tag lists, chip clouds.	Prevents overflow.
`items-start`	Aligns children to the cross-axis start.	Top-aligned rows.	Useful when items have different heights.
`items-center`	Centers items on the cross axis.	Buttons, avatars, menus.	A common vertical alignment helper.
`items-end`	Aligns children to the bottom edge.	Footer rows, alignment polish.	Rare but useful.
`justify-start`	Pushes children to the beginning.	Most default rows.	Keeps intent clear.
`justify-center`	Centers children along the main axis.	Hero content, button bars.	One of the easiest centering tools.
`justify-between`	Places first and last child at the edges.	Navbars, headers, cards.	Very common in dashboards.
`justify-around`	Spaces items with equal outer gap.	Loose UI clusters.	Less common than `justify-between`.
`gap-*`	Adds spacing between flex children.	Almost all flex layouts.	Cleaner than manually adding margins to children.
`flex-1`	Lets an item grow and shrink to fill space.	Main content beside sidebar.	The key to fluid layouts.
`flex-none`	Prevents item from growing or shrinking.	Icons, avatars, fixed panels.	Protects fixed-size elements.
`grow`	Allows growth.	Fill remaining width.	Handy for inputs and content panes.
`shrink-0`	Prevents shrinking.	Images and icons.	Stops layout collapse on narrow screens.
`basis-*`	Sets initial size of a flex item.	Responsive columns.	Useful with `md:basis-1/3`.
`self-start`	Overrides alignment for one child.	Special-case items.	Adjust one item without affecting the rest.
`order-*`	Changes visual order.	Responsive reordering.	Useful, but use sparingly for accessibility.

div {
    class: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between"
}

Grid essentials

CSS Grid is the right choice when your layout has rows and columns at the same time. It shines in dashboards, galleries, settings pages, and card-heavy views.

Class	What it does	Why it matters	Common pattern
`grid`	Enables grid layout.	The base for two-dimensional layouts.	Card section, dashboard.
`inline-grid`	Grid that behaves inline.	Useful in special content flows.	Rare, but valid.
`grid-cols-1`	One column grid.	Mobile default.	Stacked layout.
`grid-cols-2`	Two equal columns.	Simple split views.	Two-card rows.
`grid-cols-3`	Three equal columns.	Common card decks.	Gallery-like layout.
`grid-cols-4`	Four equal columns.	Dense dashboards.	Desktop card boards.
`col-span-*`	Makes an item span multiple columns.	Highlights featured content.	Wide card in a grid.
`row-span-*`	Makes an item span multiple rows.	Asymmetric layouts.	Rare but powerful.
`auto-rows-fr`	Auto rows divide space equally.	Good for card grids.	Consistent tile heights.
`gap-*`	Spacing between grid cells.	Cleaner than margins.	Grid gutters.
`place-items-center`	Centers both axes.	Perfect for loaders and empty states.	Single-element centering.
`place-content-center`	Centers the grid content.	Useful for grouped content.	Large wrappers.
`justify-items-start`	Aligns items horizontally within cells.	Fine control.	Use when cell content differs.
`items-start`	Aligns items vertically in cells.	Useful for content cards.	Top-align grid cards.

div {
    class: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
}

Spacing: margin, padding, and gaps

Spacing is one of the biggest style differentiators in good UI. Tailwind’s spacing scale becomes intuitive once you learn the rhythm. Use padding to create breathing room inside a component, margin to separate components, and gap to separate children in flex/grid layouts.

Class	What it does	When to use it	Why it is preferred
`p-*`	Padding on all sides.	Cards, sections, buttons.	Creates interior space.
`px-*`	Horizontal padding.	Most containers.	Protects content from edges.
`py-*`	Vertical padding.	Buttons, panels.	Makes components feel balanced.
`m-*`	Margin on all sides.	Outer spacing.	Best for separating components.
`mx-auto`	Horizontal auto margins.	Centering containers.	The classic centered shell.
`mt-*`	Top margin.	Stack spacing.	Keeps flow readable.
`mb-*`	Bottom margin.	Text blocks, sections.	Classic vertical rhythm.
`space-y-*`	Vertical spacing between direct children.	Form fields, stacked lists.	Cleaner than margins on every child.
`space-x-*`	Horizontal spacing between direct children.	Toolbar groups.	Useful in row layouts.
`gap-*`	Spacing between children in flex/grid.	Preferred for modern layouts.	Works better than manual child margins.
`divide-y`	Adds separators between children.	Menus, list items.	Great for structured content.
`divide-x`	Vertical separators between children.	Tab groups, split panes.	Less common but useful.

div {
    class: "flex flex-col gap-4 px-5 py-6"
}

Sizing: width, height, and max widths

This is the section that makes a layout feel responsive. The usual winning pattern is w-full plus a sensible max-w-* value, often with mx-auto.

Class	What it does	Why it is useful	Practical advice
`w-full`	100% width of parent.	Best default for mobile.	Use on containers and inputs.
`w-screen`	100% of viewport width.	Full-bleed layouts.	Can cause overflow if misused.
`w-auto`	Natural width.	Content-sized elements.	Useful for buttons and badges.
`max-w-sm`	Small max width.	Compact forms.	Good for auth screens.
`max-w-md`	Medium max width.	Forms and cards.	One of the most useful sizes.
`max-w-lg`	Large max width.	Content panels.	Good for articles and settings.
`max-w-xl`	Extra large max width.	Marketing content.	Useful for wider shells.
`max-w-2xl ... max-w-7xl`	Progressively larger caps.	Page shells, content wide layouts.	Use when the page should scale but not stretch forever.
`h-full`	Fills parent height.	Nested panels.	Requires parent height to be defined.
`h-screen`	Viewport height.	Full-screen sections.	Good for hero pages.
`min-h-screen`	At least viewport height.	Centered forms, auth pages.	Excellent for mobile-friendly full pages.
`min-h-dvh`	Dynamic viewport height.	Mobile browser bars.	Often nicer than `h-screen` on mobile.
`size-*`	Sets width and height together.	Icons and avatars.	More concise than two classes.
`aspect-video`	Keeps 16:9 aspect ratio.	Video, previews, media cards.	Prevents jumpy media tiles.

div {
    class: "mx-auto w-full max-w-md min-h-screen px-5"
}

Typography

Typography shapes readability more than almost any other part of the UI. Tailwind gives you fast control over size, weight, line height, tracking, alignment, and overflow behavior.

Class	What it does	Why it matters	Use case
`text-xs ... text-7xl`	Font size scale.	Creates visual hierarchy.	Headings, labels, body.
`font-light / normal / medium / semibold / bold / extrabold`	Font weight options.	Useful for emphasis.	Titles and metadata.
`leading-none / tight / snugs / normal / relaxed / loose`	Line height.	Controls readability.	Body text and headings.
`tracking-tight / normal / wide / wider`	Letter spacing.	Great for headlines and caps.	Brand styling.
`text-left / center / right / justify`	Text alignment.	Affects readability and emphasis.	Center only when it improves design.
`truncate`	Single-line truncation.	Prevents overflow in small spaces.	Table cells, labels.
`break-words`	Wraps long words.	Prevents layout breakage.	URLs, tokens, hashes.
`whitespace-nowrap`	Prevents wrapping.	Useful for nav items and tags.	Keeps labels on one line.
`line-clamp-*`	Limits number of lines.	Useful for previews.	Cards and article summaries.
`italic`	Makes text italic.	Rare but useful.	Quotes, emphasis.

div {
    class: "space-y-2"
    h1 { class: "text-3xl font-bold tracking-tight", "Welcome back" }
    p { class: "text-sm leading-6 text-slate-600", "Build readable interfaces with clear hierarchy." }
}

Color, backgrounds, rings, and surfaces

Color should support hierarchy, not fight it. Tailwind’s color system helps you create clear contrast for text, surfaces, borders, and feedback states.

Class	What it does	Why use it	Notes
`text-*`	Changes text color.	Primary content and labels.	Keep contrast high.
`bg-*`	Changes background color.	Cards, buttons, sections.	Use for hierarchy.
`border-*`	Changes border color.	Inputs, cards, separators.	Great for subtle structure.
`ring-*`	Creates a focus ring or outline-like effect.	Accessibility and focus styling.	Very useful for interactive elements.
`shadow-*`	Adds shadow depth.	Elevates cards and overlays.	Use sparingly.
`opacity-*`	Controls transparency.	Disabled states and overlays.	Useful for layered UI.
`bg-white/80`	Semi-transparent background.	Floating headers, glass effects.	Pairs well with backdrop blur.
`backdrop-blur`	Blurs background behind an element.	Overlay panels, glass UI.	Works best with transparency.
`placeholder-*`	Styles placeholder text.	Forms and inputs.	Helps with form polish.
`accent-*`	Changes accent color of native form controls.	Checkboxes, radios, range inputs.	Simple form theming.

button {
    class: "rounded-lg bg-blue-600 px-4 py-2 text-white shadow-sm hover:bg-blue-700"
}

Borders, rounding, and depth

Borders and shadows give structure. They are subtle, but they strongly influence whether a UI feels polished or flat.

Class	What it does	Why it matters	Pattern
`border`	Adds a 1px border.	Defines edges and separation.	Input fields, cards.
`border-2`	2px border.	Stronger emphasis.	Active states.
`border-t / border-b / border-l / border-r`	Borders on one side only.	Useful for separators.	Headers and panels.
`rounded`	Small radius.	Softer corners.	Default polished look.
`rounded-md / lg / xl / 2xl / full`	Increasing radius scale.	Component-specific styling.	Cards, pills, avatars.
`shadow-sm`	Light shadow.	Cards and floating panels.	Subtle depth.
`shadow`	Standard shadow.	General elevation.	Very common.
`shadow-md / lg / xl`	Stronger shadows.	Modals and popovers.	Use carefully.
`ring-1`	Ring outline.	Focus or emphasis.	Great with inputs.
`outline-none`	Removes browser outline.	Only if you replace it with an accessible ring.	Never remove focus styling without replacing it.

div {
    class: "rounded-2xl border border-slate-200 bg-white shadow-sm"
}

Positioning and layering

Positioning becomes important for sticky headers, dropdowns, overlays, badges, and modal layers. Use it intentionally because it can complicate stacking contexts.

Class	What it does	Why it helps	Example use
`relative`	Establishes a positioning context.	Usually the parent for absolute children.	Card with badge.
`absolute`	Positions relative to the nearest positioned ancestor.	Perfect for badges and overlays.	Floating icons.
`fixed`	Positions relative to viewport.	Useful for modals and sticky UI.	Bottom sheets, toast layers.
`sticky`	Sticks after scrolling.	Great for headers and side panels.	Section titles.
`inset-0`	Sets top/right/bottom/left to 0.	Full overlay coverage.	Modal scrim.
`top-0 left-0 right-0 bottom-0`	Individual edge controls.	Precise placement.	Dropdowns, tooltips.
`z-*`	Stacking order.	Prevents overlap bugs.	Modal above everything.
`-translate-x-1/2 -translate-y-1/2`	Centers with transforms.	Classic absolute centering.	Floating badges, loaders.
`overflow-hidden`	Clips child overflow.	Useful for rounded cards and media.	Prevents visual spill.

div {
    class: "relative"
    span { class: "absolute -top-2 -right-2 rounded-full bg-red-500 px-2 py-1 text-xs text-white", "3" }
}

Overflow, scrolling, and text handling

Good layouts do not surprise the user with hidden content or accidental page-wide horizontal scrolling. Overflow utilities help you control what happens when content is larger than the box.

Class	What it does	Why it matters	Common use
`overflow-hidden`	Clips anything outside the box.	Great for rounded media and cards.	Containers with images.
`overflow-auto`	Adds scrollbars if needed.	Prevents broken layouts.	Scrollable panels.
`overflow-scroll`	Always shows scrollbars.	Rare but explicit.	Debugging or special cases.
`overflow-x-auto`	Horizontal scrolling when needed.	Tables and code blocks.	Responsive data views.
`overflow-y-auto`	Vertical scrolling when needed.	Side panels and modals.	Body locks, panes.
`scroll-smooth`	Smooth anchor scrolling.	Nicer UX for docs pages.	Documentation sites.
`truncate`	Ends with ellipsis.	Clean single-line labels.	Sidebar items.
`break-all`	Breaks words anywhere.	Use only when necessary.	Long tokens in narrow areas.
`break-words`	Preferred word wrapping behavior.	Safer than break-all.	URLs and IDs.

div {
    class: "max-h-96 overflow-y-auto rounded-lg border"
}

Interactions, transitions, and states

Interaction classes make the UI feel alive. They are most effective when they are consistent, subtle, and accessible.

Class	What it does	Why it helps	Tip
`cursor-pointer`	Shows pointer cursor.	Signals clickability.	Use for interactive cards and buttons.
`cursor-not-allowed`	Signals disabled action.	Makes state obvious.	Pair with disabled styles.
`select-none`	Prevents text selection.	Useful for buttons and controls.	Avoid for text users may want to copy.
`pointer-events-none`	Disables mouse interaction.	Helpful for overlays or disabled layers.	Use carefully.
`transition`	Enables transitions.	Smooths hover and focus changes.	Default animation starter.
`duration-150 / 200 / 300`	Controls transition speed.	Makes motion feel intentional.	Keep it subtle.
`ease-in / out / in-out`	Controls transition timing.	Improves motion feel.	Use consistent easing.
`hover:`	Applies on hover.	Mouse feedback.	Great for buttons and cards.
`focus:`	Applies when focused.	Keyboard interaction.	Important for accessibility.
`focus-visible:`	Focus only when appropriate.	Cleaner keyboard focus styling.	A strong default choice.
`active:`	Applies while pressed.	Tactile feedback.	Buttons.
`disabled:`	Styles disabled elements.	Makes state clearer.	Forms and actions.
`group` + `group-hover:`	Lets child elements react to parent hover.	Great for cards with icons.	Nicer hover interactions.
`peer` + `peer-focus:`	Lets siblings react to another element.	Useful in forms.	Floating labels.

button {
    class: "rounded-lg bg-slate-900 px-4 py-2 text-white transition hover:bg-slate-700 focus-visible:ring-2 focus-visible:ring-slate-400"
}

Responsive design strategy

Tailwind is mobile-first: unprefixed utilities apply everywhere, and breakpoint-prefixed utilities apply from that breakpoint upward. This is why patterns like w-full max-w-md mx-auto work so well.

Prefix	Applies from	How to think about it	Example
`sm:`	small screens and up	Start adjusting for larger phones and small tablets.	`sm:grid-cols-2`
`md:`	medium screens and up	Tablet and small laptop changes.	`md:flex-row`
`lg:`	large screens and up	Desktop layout refinements.	`lg:grid-cols-4`
`xl:`	extra large screens and up	Wide desktop tuning.	`xl:max-w-6xl`
`2xl:`	very large screens and up	Rare, but useful for huge monitors.	`2xl:gap-10`
`dark:`	dark mode context	Theme-aware styles.	`dark:bg-slate-900`
`motion-reduce:`	reduced motion preference	Accessibility-friendly animation control.	`motion-reduce:transition-none`

div {
    class: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between"
}

Forms and inputs

Forms are where many UIs feel either polished or frustrating. Tailwind helps you make them consistent, accessible, and easy to scan.

Class	What it does	Why it helps forms	Notes
`block`	Makes labels and inputs stack cleanly.	Improves readability.	Common for form fields.
`w-full`	Inputs fill available width.	Better on mobile.	Best default.
`rounded-lg`	Soft corners.	Modern form look.	Common on controls.
`border`	Adds input boundary.	Makes fields obvious.	Classic form styling.
`px-3 py-2`	Comfortable input padding.	Makes fields touch-friendly.	Great mobile default.
`placeholder-slate-400`	Styles placeholder text.	Helps hierarchy.	Avoid too low contrast.
`focus-visible:ring-2`	Accessible focus emphasis.	Keyboard-friendly.	Very important.
`disabled:opacity-50`	Dim disabled fields.	State clarity.	Common pairing.
`invalid:border-red-500`	Styles invalid form state.	Validation feedback.	Combine with helper text.
`file:`	Targets file inputs.	Special input styling.	Useful for uploads.
`appearance-none`	Removes native styles.	Custom controls.	Useful with select boxes.

div {
    class: "flex flex-col gap-3"
    label { class: "text-sm font-medium", "Email" }
    input { class: "w-full rounded-lg border px-3 py-2 focus-visible:ring-2", r#type: "email" }
}

Practical layout recipes

These are the patterns you will reuse most often. Learn these once and you can build most app screens quickly.

Recipe	Core classes	Why it works	When to use
Centered auth page	`min-h-screen flex items-center justify-center px-4`	Centers the form and keeps it usable on small screens.	Login, signup, reset password.
Responsive shell	`w-full max-w-7xl mx-auto px-4 md:px-6`	Fluid container with readable max width.	Most pages.
Sidebar layout	`flex flex-col md:flex-row`	Stacks on mobile, splits on desktop.	Admin dashboards.
Card grid	`grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3`	Adapts to viewport size naturally.	Catalogs, dashboards.
Modal overlay	`fixed inset-0 z-50 flex items-center justify-center`	Full-screen layer with centered panel.	Dialogs.
Sticky header	`sticky top-0 z-40`	Keeps nav visible while scrolling.	Docs and dashboards.
Mobile nav drawer	`fixed inset-y-0 left-0 w-72`	A side panel that slides over content.	Phone navigation.
Toolbar	`flex items-center justify-between gap-3`	Simple and balanced alignment.	Page headers.

div {
    class: "min-h-screen flex items-center justify-center px-4"
    div {
        class: "w-full max-w-md rounded-2xl border bg-white p-6 shadow-sm"
        h1 { class: "text-2xl font-bold", "Sign in" }
    }
}

Dioxus-specific notes and examples

Dioxus rsx! is intentionally close to HTML. That means most Tailwind layouts transfer directly from your web intuition into your Rust component tree. Attributes are written as key-value pairs, and event handlers use the on... pattern.

Concept	What it means in Dioxus	Why it matters	Example
`class: "..."`	Sets the HTML class attribute.	This is how Tailwind classes are attached.	Most components.
`oninput`	Input change event handler.	Useful for live state updates.	Search boxes, forms.
`onclick`	Click handler.	Buttons and interactive cards.	Menus, actions.
`key`	Identity for list items.	Important for dynamic lists.	Repeated rows.
Component props	Props flow through component boundaries.	Keeps layout reusable.	Design-system components.

use dioxus::prelude::*;

#[component]
fn LoginCard() -> Element {
    rsx! {
        div {
            class: "mx-auto w-full max-w-md min-h-screen px-5 flex flex-col justify-center",
            div {
                class: "rounded-2xl border bg-white p-6 shadow-sm",
                h1 { class: "text-2xl font-bold", "Welcome back" }
                input {
                    class: "mt-4 w-full rounded-lg border px-3 py-2",
                    r#type: "email",
                    placeholder: "Email"
                }
                button {
                    class: "mt-4 w-full rounded-lg bg-blue-600 px-4 py-2 text-white",
                    onclick: move |_| {},
                    "Continue"
                }
            }
        }
    }
}

Common mistakes and fixes

Most layout bugs come from the same handful of mistakes. This section is meant to save time when something feels off.

Problem	Likely cause	Fix	Mental model
Container is too wide on desktop	Missing max width.	Add `max-w-md` or a larger cap.	Fluid width needs a limit.
Content touches screen edges on mobile	No horizontal padding.	Add `px-4` or `px-5`.	Never let text kiss the viewport edge.
Centered card is not centered	Missing `mx-auto` or parent has strange layout.	Use `mx-auto` and a sensible width.	Center the container, not just the text.
Flex items overflow	Children are refusing to shrink.	Try `min-w-0` or `shrink` utilities.	Flex content needs shrink rules.
Elements not spacing properly	Using margins in the wrong direction.	Prefer `gap` or `space-y`.	Use layout spacing, not manual offsets.
Page scrolls horizontally	A child is wider than the viewport.	Audit widths and overflow.	One bad child can break the page.
Focus state is invisible	Outline removed without replacement.	Add `focus-visible:ring-*`.	Accessibility should remain visible.
Sticky element does not stick	Missing offset or parent overflow issue.	Use `top-0` and check ancestor overflow.	Sticky needs the right context.

div {
    class: "w-full max-w-md mx-auto px-4"
}

One-screen cheat sheet

These are the utilities you will reach for constantly. Memorize the patterns, not the individual class names.

Need	Use	Why
Center a container	`mx-auto`	Centers a block with a defined width.
Fill mobile screen	`w-full`	Uses the available width.
Limit desktop width	`max-w-md` or `max-w-7xl`	Keeps line lengths readable.
Make full page height	`min-h-screen`	Useful for auth and landing pages.
Stack items	`flex flex-col`	Simple vertical layouts.
Row items	`flex flex-row`	Simple horizontal layouts.
Responsive switch	`md:flex-row`	Mobile-first breakpoint overrides.
Equal card grid	`grid grid-cols-1 md:grid-cols-2`	Easy responsive grid.
Space between siblings	`gap-4`	Cleaner than individual margins.
Improve focus accessibility	`focus-visible:ring-2`	Visible keyboard focus.

div {
    class: "w-full max-w-md mx-auto min-h-screen flex flex-col gap-6 px-5 py-6"
}

Final design rule

Start mobile-first. Use flex for one axis, grid for two axes, gap for spacing, mx-auto for centering, and w-full + max-w-* for layout that adapts cleanly from phone to desktop.