May 11
Loading video player...
You write a class. You name it .card. Three months later, nobody knows what .card does — including you. This is Episode 01 of a 25-part Tailwind v4 series. We start with the only question that matters: what is Tailwind, and why did the v4 rewrite change the setup entirely? In 11 minutes we cover: - Why utility-first is NOT inline styles (and what hover:, md:, dark: actually do) - The CSS-first config — @theme replaces tailwind.config.js completely - The Vite plugin install (the only path you should be using in 2026) - Preflight — Tailwind's CSS reset, and why your headings suddenly look the same size - The IntelliSense extension that turns this into the fastest way to build a UI If you learned Tailwind in v3, watch this. A lot of what you know is now outdated. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⏱ CHAPTERS 00:00 The Naming Problem 00:24 What We're Covering 00:48 Utility-First — The Idea 01:27 Old Way vs Tailwind Way 02:24 Prefixes — hover: md: dark: 02:50 Why It's Not Inline Styles 03:16 Zero Dead CSS 04:12 Three Ways to Install 04:48 Vite Setup From Scratch 05:28 npm run dev — Build at Typing Speed 06:00 The @theme Aha Moment 07:09 v3 vs v4 — What Changed 08:26 Preflight — The CSS Reset 09:29 IntelliSense — Not Optional 09:55 Recap & Your Challenge ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🛠 RESOURCES MENTIONED - Tailwind CSS docs — https://tailwindcss.com - Tailwind CSS IntelliSense for VS Code — search "Tailwind CSS IntelliSense" in the extensions panel - Vite — https://vitejs.dev 📦 YOUR CHALLENGE Set up a fresh Vite project. Install Tailwind v4. Write @theme, declare one custom colour. Use bg-brand in a div. Open the browser. If you get a coloured box on screen, you've done the single most important thing in this series. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎬 ABOUT THIS CHANNEL — PIXEL GRID UI Modern frontend tutorials. CSS, animations, Tailwind, GSAP, the stuff that makes a UI actually feel good. New tutorial every week. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #tailwindcss #tailwindv4 #webdevelopment #frontenddev #cssframework #vite #pixelgridui ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━