<story><title>Working with Tailwind CSS every day for 2 years</title><url>https://www.themosaad.com/blog/two-years-of-tailwind-css</url></story><parent_chain><item><author>icambron</author><text>A lot of people I respect really like Tailwind, but I just don’t get it. Seems like you end up with walls of classes because you don’t name your compositions, and thus your design system doesn’t actually &lt;i&gt;live&lt;/i&gt; anywhere. If you have a standard box in your design system with a certain padding, spacing, font size, and so on, are you really going to write out all its constituent properties every time you use it? How do you manage that effectively?&lt;p&gt;As an alternative, use a scss mixin (or even just a class) called standard-box and then use it everywhere. Do that for all the major parts of your design and you’ve created a language with which to build individual chunks of UI. Modifying the design system itself isn’t free but it’s a lot easier than mapping the change to every use of every tailwind class.</text></item></parent_chain><comment><author>tshaddox</author><text>&amp;gt; A lot of people I respect really like Tailwind, but I just don’t get it.&lt;p&gt;I think I get it. For years there have been lots of popular CSS authoring conventions for JavaScript apps that are clever but complicated, fragile, and have a lot of churn. Most of these either have large JavaScript runtimes that generate and inject styles on the fly as components render, or deep integration into the JavaScript build system like Webpack&amp;#x2F;Babel&amp;#x2F;etc. plugins, or both.&lt;p&gt;I believe that there was intense fatigue from supporting these systems, keeping up with the newest versions and trends in the high-churn JavaScript ecosystem, etc. Tailwind essentially offers a ridiculously simple way out of this fatigue. You just say screw it, let&amp;#x27;s just author all our JS component styles using string literals that from JavaScript&amp;#x27;s perspective are just totally arbitrary HTML classes. No more importing things, or using plugins that transform the AST of our JS source code, or extracting chunks during SSR, etc. We just run this totally separate Tailwind compiler that looks for string literals that seem like Tailwind utility classes and generates a stylesheet that we just import in our HTML.&lt;p&gt;Tailwind is pretty great on its own as a utility CSS framework. There&amp;#x27;s a lot of thought put into the &amp;quot;API&amp;quot; of their utility classes, and because it&amp;#x27;s so popular there is a ton of support for almost any use case you&amp;#x27;ll come across. But at the end of the day, I think the reason for its ubiquity (particularly among respected veterans and &amp;quot;influencers&amp;quot; in the frontend community) is that is offers a way out of the &amp;quot;JavaScript tooling rat race&amp;quot; that was causing so much fatigue.</text></comment>
<story><title>Working with Tailwind CSS every day for 2 years</title><url>https://www.themosaad.com/blog/two-years-of-tailwind-css</url></story><parent_chain><item><author>icambron</author><text>A lot of people I respect really like Tailwind, but I just don’t get it. Seems like you end up with walls of classes because you don’t name your compositions, and thus your design system doesn’t actually &lt;i&gt;live&lt;/i&gt; anywhere. If you have a standard box in your design system with a certain padding, spacing, font size, and so on, are you really going to write out all its constituent properties every time you use it? How do you manage that effectively?&lt;p&gt;As an alternative, use a scss mixin (or even just a class) called standard-box and then use it everywhere. Do that for all the major parts of your design and you’ve created a language with which to build individual chunks of UI. Modifying the design system itself isn’t free but it’s a lot easier than mapping the change to every use of every tailwind class.</text></item></parent_chain><comment><author>davnicwil</author><text>I think the usual solution here is just to make your standard box a component, as opposed to using a div with a class. Then if your design system changes, you just change the wall of tailwind classes in that single component file.</text></comment>