Tailwind 4.0 is here, and Scott and Wes break down all the spicy new features, from CSS-powered configs to first-class container queries. Plus, they dig into Tailwind Oxide, @property magic, and whether it’s finally time to stop asking, “Why not just use normal CSS?” <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=00:16">00:16</a> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="8"> <a href="#t=01:03">01:03</a> Tailwind 4. <ul> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://tailwindcss.com/blog/tailwindcss-v4">Tailwind CSS V4.0 Blog</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=02:53">02:53</a> Wes’ favorite new feature.</li> <li class="has-line-data" data-line-start="9" data-line-end="11"> <a href="#t=05:45">05:45</a> @property. <ul> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href= "https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs">CSS Houdini API</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=07:28">07:28</a> The config is now a CSS file.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=08:25">08:25</a> Tailwind Oxide.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=10:48">10:48</a> P3 color space.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=12:36">12:36</a> Dynamic Utilities + Variants.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=13:36">13:36</a> Data attributes.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=15:32">15:32</a> First class container query support.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=17:03">17:03</a> Starting Style.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=19:22">19:22</a> When to use inline styles.</li> <li class="has-line-data" data-line-start="19" data-line-end="21"> <a href="#t=20:13">20:13</a> Descendant selector. <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://tailwindcss.com/docs/hover-focus-and-other-states#styling-all-descendants"> Styling Descendants</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=20:48">20:48</a> Why not just use “normal” CSS?</li> <li class="has-line-data" data-line-start="22" data-line-end="25"> <a href="#t=22:03">22:03</a> No text shadow support. <ul> <li class="has-line-data" data-line-start="23" data-line-end="25"> <a href="https://www.youtube.com/watch?v=ngBgjDq-Li4">Scott has to use Tailwind</a>.</li> </ul> </li> </ul> <a id="Hit_us_up_on_Socials_25"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

877: Tailwind 4

Syntax - Tasty Web Development Treats

AI Chapters

AI Insights

Reviews