Tailwind CSS posts
These lessons use Tailwind CSS 3 unless a lesson says otherwise. This site customizes its spacing scale: for example, p-10 is 10px here, while a standard Tailwind 3 setup uses 2.5rem. Copying an isolated example includes the compiled styles. The official upgrade guide explains the changes in Tailwind 4.
A practical way to learn Tailwind CSS
Learn native CSS first, choose a Tailwind version, and practice translating small layouts into utilities.
Visit →Build a content card with Tailwind 3
Create a Tailwind 3 card with a real heading, stable artwork and a descriptive navigation link.
Visit →Build a working dialog with Tailwind 3
Style a native modal dialog with Tailwind 3 and verify opening, Escape, closing, and focus return.
Visit →Build navigation that stays available with Tailwind 3
Create a wrapping Tailwind 3 navigation bar with real links, a landmark name, and visible keyboard focus.
Visit →Build responsive grids with Tailwind 3
Compare fixed grid columns with Tailwind 3 responsive variants and inspect the compiled grid rules.
Visit →Five ways to center content with Tailwind 3
Compare margins, flex, grid and positioned centering with Tailwind 3, including each layout’s prerequisites.
Visit →Make a readable table with Tailwind 3
Use real table headers and a caption, then keep wide data inside an accessible horizontal scroll region.
Visit →Set up Tailwind CSS 3 or 4 deliberately
Choose a Tailwind major version, build a small stylesheet, and verify that utility classes appear in the generated CSS.
Visit →Set up Tailwind help in VS Code
Configure Tailwind IntelliSense and optional Prettier class sorting for the project’s actual major version.
Visit →Size responsive video with Tailwind 3
Use aspect-video, full width, and native controls for a self-contained responsive Tailwind 3 video example.
Visit →Style a labeled form with Tailwind 3
Build a Tailwind 3 form with associated labels, native validation, visible focus, and local-only feedback.
Visit →Style real lists with Tailwind 3
Use Tailwind 3 list utilities while preserving list structure and choosing marker placement deliberately.
Visit →Style usable buttons with Tailwind 3
Build a Tailwind 3 button with a working action, focus feedback, and a genuinely disabled comparison.
Visit →Tailwind CSS and Bootstrap: different starting points
Compare utility-first styling with component-oriented defaults without assuming either framework guarantees speed or accessibility.
Visit →