{"version":"1.0","type":"rich","provider_name":"Acast","provider_url":"https://acast.com","height":250,"width":700,"html":"<iframe src=\"https://embed.acast.com/$/655148df2861630012a1d01b/66cf40f3d18488679c0480e3?\" frameBorder=\"0\" width=\"700\" height=\"250\"></iframe>","title":"Shruti Balasa: How to Maximize Success with Tailwind CSS","thumbnail_width":200,"thumbnail_height":200,"thumbnail_url":"https://open-images.acast.com/shows/655148df2861630012a1d01b/1724858444412-f91fd30f-fab9-4eb7-890c-b1150723fb8e.jpeg?height=200","description":"<p>Links</p><p>- Wix Studio (sponsor): https://tej.as/wix</p><p>- Codecrafters (sponsor): https://tej.as/codecrafters</p><p>- Shruti Balasa's Website: https://shrutibalasa.com/</p><p>- Tailwind Weekly: https://tailwindweekly.com/</p><p>- Shruti on X: https://x.com/shrutibalasa</p><p>- Tejas on X: https://x.com/tejaskumar_</p><p><br></p><p>Summary</p><p><br></p><p>Shruti Balasa, a Tailwind CSS expert, shares her journey of discovering and specializing in Tailwind CSS. She explains how Tailwind CSS enhanced her CSS skills and made her more efficient in web development. She also discusses the pain points that Tailwind CSS solves, such as context switching, naming conventions, and cross-browser compatibility. </p><p><br></p><p>Shruti emphasizes the importance of understanding CSS fundamentals before diving into Tailwind CSS. She also addresses common criticisms of Tailwind CSS, such as the length of class names and the use of the apply directive. </p><p><br></p><p>The conversation also covers topics like layers, dynamic and static components, and the use of Tailwind CSS for email design. Shruti recommends using plugins like Prettier Tailwind CSS Sorting for code organization and subscribing to Tailwind Weekly for updates on new plugins and resources. She also discusses upcoming features in Tailwind CSS, such as CSS-first configuration and container queries.</p><p><br></p><p>Takeaways</p><p><br></p><p>1. Understanding CSS fundamentals is important before diving into Tailwind CSS</p><p>2. Tailwind CSS solves pain points such as context switching and naming conventions</p><p>3. The apply directive should be used sparingly and for specific cases</p><p>4. The Tailwind config file allows customization and the creation of plugins</p><p>5. Tailwind CSS version 4 introduces auto-discovery and shifts towards using CSS for configuration</p><p>6. Tailwind CSS generates only the styles that are used in the source code with the Just-In-Time (JIT) compiler</p><p>7. Tailwind CSS is a choice and not a requirement for improving accessibility or performance.</p><p>8. Subscribing to Tailwind Weekly can provide updates on new plugins and resources.</p><p>9. Upcoming features in Tailwind CSS include CSS-first configuration and container queries.</p><p><br></p><p>Chapters</p><p><br></p><p>06:19 Discovering and Specializing in Tailwind CSS</p><p>09:33 Enhancing CSS Skills with Tailwind CSS</p><p>13:19 Solving Pain Points with Tailwind CSS</p><p>17:36 The Use of the Apply Directive in Tailwind CSS</p><p>26:16 Upcoming Changes in Tailwind CSS Version 4</p><p>34:21 The Latest State of Tailwind CSS v4 Discussions</p><p>37:33 Generating Only the Used Styles with the JIT Compiler</p><p>40:56 Maintaining Consistency in Large-Scale Projects with Custom Classes</p><p>53:47 Responsive Features in Tailwind CSS: Dark Mode and Reduced Motion</p><p>01:01:31 Tailwind CSS: A Choice for Convenience</p><p>01:04:28 Exploring Layers and Components in Tailwind CSS</p><p>01:09:00 Tailwind CSS for Email Design and Development</p><p>01:18:00 Useful Plugins for Tailwind CSS Productivity</p><p>01:22:34 Exciting Upcoming Features in Tailwind CSS</p>","author_name":"Tejas Kumar"}