css
6 articles in this category.
Build a Comparison Page in Astro: Side-by-Side Content with Structured Schema
How to create a comparison page in Astro with Content Collections — schema design for two-product comparisons, winner display, verdict box, and a comparison table built with plain CSS.
Read →Build a Guide Page in Astro: Step-by-Step Content with Difficulty and Time Estimates
How to create a guide content type in Astro with difficulty badges, estimated reading time, and a structured step-by-step layout — using Content Collections and plain CSS.
Read →Build a Review Page in Astro: Schema, Layout and Components
How to create a structured review page in Astro with Content Collections — schema design, pros/cons display, rating stars, and a verdict box. With plain CSS and a promise of what's coming.
Read →Styling in Astro: Start with Plain CSS Before Reaching for Tailwind
How CSS works in Astro, including scoped styles, global CSS, CSS variables, and why a clean layout doesn't need a framework. With the actual CSS used to build this demo site.
Read →Tailwind CSS in Astro: Refactoring Every Page and Fixing What Breaks
Refactor Astro pages and components to Tailwind CSS v4, fix scoped-style leaks, handle generated Markdown, and avoid dynamic class build failures.
Read →How I Switched an Astro Site from Plain CSS to Tailwind v4
Install Tailwind CSS v4 in Astro, choose a safe migration strategy, and refactor global styles and layouts using lessons from a real content site.
Read →