Step-by-step articles on Modern CSS & Tailwind, part of our Frontend collection.
Showing 10 articles
Tailwind CSS v4 is a ground-up rewrite. The biggest change for day-to-day work: configuration moves from tailwind.config.js into your CSS file. Install with Vite npm install tailwindcss @tailwindcss/vite // vite.config.js import { defineConfig } from 'vite'; i...
Media queries respond to the viewport. But a card might sit in a wide main column on one page and a narrow sidebar on another. Container queries let the card respond to the width of its container instead. 1. Declare a container .card-wrapper { container-type:...
:has() matches an element if it contains something that matches the selector inside the brackets. For the first time, CSS can style a parent based on its children. Cards with or without an image .card:has(img) { grid-template-rows: 200px auto; } .card:not(:has...
Nesting was one of the main reasons people used Sass. It's now part of CSS itself and works in every modern browser. The basics .card { padding: 1rem; border-radius: 12px; h2 { font-size: 1.25rem; /* .card h2 */ } &:hover { box-shadow: 0 4px 20px rgb(0 0 0 / 0...
When two CSS rules conflict, specificity usually decides who wins. That leads to !important and ever-longer selectors. Cascade layers add a level above specificity: rules in a later layer beat rules in an earlier layer, no matter how specific. Declare the orde...
#hex and rgb() describe colours the way screens produce them, not the way people see them. Newer CSS colour functions make palettes more consistent and easier to generate. oklch(): perceptual colour :root { /* oklch(lightness chroma hue) */ --brand-300: oklch(...
CSS Grid handles two-dimensional layout: rows and columns. These recipes cover most real-world layouts. Responsive cards without media queries .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.5rem; } Columns...
Animating from one UI state to another (a thumbnail growing into a detail view, a list reordering) used to need a heavy animation library. The View Transitions API lets the browser do it. Same-page transitions function showDetails(item) { if (!document.startVi...
Scroll effects used to mean scroll event listeners or IntersectionObserver. Scroll-driven animations connect a normal CSS animation to the scroll position, and they run off the main thread, so they stay smooth. A reading progress bar .progress { position: fixe...
Good dark mode isn't just inverted colours. It needs its own palette, respects the user's system setting, and lets them override it. 1. Use semantic colour variables :root { --bg: #ffffff; --surface: #f8fafc; --text: #0f172a; --muted: #64748b; --brand: #0d9488...
