111: Jeffrey Way - Building the New Laracasts with Tailwind CSS

Full Stack Radio

Episode | Podcast

Date: Thu, 28 Mar 2019 16:16:00 +0000

<p>Topics include:</p><ul> <li>How Jeffrey has written CSS historically, and what drew him to a utility-first approach</li> <li>Incrementally replacing Bulma with Tailwind</li> <li>The importance of solidifying your Tailwind configuration before beginning to implement a design</li> <li>The new Tailwind color system</li> <li>Why choosing a color palette in advance is much better than using preprocessor functions like darken() or lighten()</li> <li>How duplicating your markup is often a better solution than trying to write incredibly crafty responsive CSS</li> <li>How Tailwind helps with performance by letting you keep your CSS cached</li> <li>How to use CSS variables to create multiple themes for the same Tailwind site</li> </ul><p>Sponsors:</p><ul> <li> <a href="https://rollbar.com/fullstackradio">Rollbar</a>, sign up at https://rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for <a href="https://opencollective.com/">Open Collective</a> </li> <li> <a href="https://www.imagecon.com/?utm_source=fullstackradio&amp;utm_medium=Sponsored_Podcast&amp;utm_content=imagecon2019">ImageCon</a>, Cloudinary's upcoming conference for any developer who works with rich media. Get 15% off using the code FULLSTACKRADIO15.</li> </ul><p>Links:</p><ul> <li><a href="https://laracasts.com">Laracasts</a></li> <li><a href="https://tailwindcss.com">Tailwind CSS</a></li> <li> <a href="https://tailwindcss.com/docs/state-variants/#group-hover">Group Hover</a> in Tailwind</li> <li> <a href="http://m.twitter.com">Mobile Twitter</a>, responsive app without media queries</li> <li> <a href="https://github.com/adamwathan/theming-tailwind-demo">Theming Tailwind</a> demo on GitHub</li> <li> <a href="https://laracasts.com/series/build-a-laravel-app-with-tdd/episodes/36">Easy Tailwind Themes Using CSS Variables</a>, free lesson on Laracasts</li> <li> <a href="https://laracasts.com/series/laravel-vue-and-spas">Laravel, Vue and SPAs</a>, Laracasts series on building an SPA with Tailwind CSS</li> <li> <a href="https://www.laracats.com/">LaraCats.com</a> 😸</li> </ul>