davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Classic rock, Mario Kart, and why we can’t agree on Tailwind (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://joshcollinsworth.com/blog/tailwind-is-smart-steering">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Classic rock, Mario Kart, and why we can’t agree on Tailwind</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://joshcollinsworth.com/blog/tailwind-is-smart-steering" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>When my brother and I were younger, our tastes in music were nearly polar opposites. I was a total hipster, and valued what I saw as artistic integrity and creative innovation. I was almost entirely into new and active, of-the-moment artists.</p>
<p>In contrast, my brother made virtually no judgments at all. He was open to anything and everything, but his mainstays centered on classic rock of the ’70s and ’80s. He loved rediscovering decades-old albums by many of the most well-known artists of their time.</p>
<p>Like any good elitist snob, I hated anything popular. So naturally, my brother’s kind of music was anathema to me at the time.</p>
<p>My brother never really understood what it was I seemed to dislike so strongly. So finally, one day, he asked me.</p>
<p>I thought about the question for a minute, and then summarized: “it’s all style and no substance.”</p>
<p>He burst out laughing.</p>
<p>“That’s the <em>best</em> thing about it!” he said with a huge grin. “That’s the whole point!”</p>
<p>I knew we looked at the same things in opposite ways. But I had never realized before then that, wildly enough, we had <em>all the exact same reasons</em> for it.</p>
<h2 id="we-dont-disagree-where-we-think-we-do"><a aria-hidden="true" tabindex="-1" href="#we-dont-disagree-where-we-think-we-do"><span class="icon icon-link"></span></a>We don’t disagree where we think we do</h2>
<p>Tailwind is nearly as ubiquitous as it is polarizing these days. (I trust if you’ve been interested enough to read this far, I don’t need to cite any sources there.)</p>
<p>Proponents show a near cult-like devotion to Tailwind, some even going so far as to claim it’s “fixed” CSS—or at the very least, made it manageable and predictable in a way it wasn’t for them before. Most frontend frameworks and products feature a first-class Tailwind integration, due to its soaring popularity.</p>
<p>Detractors, on the other hand, claim Tailwind is messy; it gets in the way; it violates core fundamentals of web development; it cuts against the grain; it diminishes the power of CSS; and/or that it does the <em>opposite</em> of what it’s supposed to, adding complexity and making projects even <em>harder</em> to maintain.</p>
<p>Many who use Tailwind never want to go back; many who <em>don’t</em> never want to.</p>
<p>How could we possibly disagree so sharply?</p>
<p>After using Tailwind for a good while now—both professionally and on a few small personal projects—I’ve come to what might just be the most unpopular opinion of all, in regards to that question:</p>
<p><strong>Both sides are right.</strong></p>
<p>…Ok, ok, I can hear the boos. Nobody likes a centrist. But hear me out.</p>
<p>We won’t ever get anywhere debating the merits or flaws of Tailwind, for the same reason my brother and I never persuaded each other on music.</p>
<aside class="pull-quote svelte-omo24t" aria-hidden="true" hidden><p>We could’ve dissected Bon Jovi and Sufjan Stevens all we wanted. But it didn’t matter, because our disagreement ultimately started before either one of us ever pressed the play button.</p>
</aside>

<p class="callout svelte-rzjeng"></p>
<p>We could’ve dissected Bon Jovi and Sufjan Stevens all we wanted. But it didn’t matter, because our disagreement ultimately started before either one of us ever pressed the play button.</p>

<p>It turns out, he and I actually saw every artist and album in pretty much exactly the same way to begin with.</p>
<p>We just never agreed on what was a feature, and what was a bug.</p>
<p>Likewise, I suspect most people on opposing sides of the Tailwind debate actually complete agree on Tailwind itself. I don’t think we disagree on atomic CSS, or utility classes; I think our contention comes from the valuations we made long before we ever chose our tools. Where one of us sees a selling point, the other sees a flaw.</p>
<p>Tailwind <em>is</em> great.</p>
<p>Tailwind is <em>also</em> a bad idea.</p>
<p>And it is both, at the same time, for exactly the same reasons.</p>

<p>If you’ve played <a href="https://www.nintendo.com/store/products/mario-kart-8-deluxe-switch/" rel="nofollow">Mario Kart 8 Deluxe</a> on Switch, you might know the game offers a feature called <a href="https://mariokart.fandom.com/wiki/Smart_Steering" rel="nofollow">Smart Steering</a>.</p>
<p>(<em>Yes, this is still about Tailwind. Bear with me here</em>.)</p>
<p>Smart Steering is essentially an AI copilot. When enabled, you control your racer as normal, except that if you start to go off the road, the game will automatically take the wheel and steer you back on course. No more slogging through the grass, or plummeting off the side of the track.</p>
<p>Smart Steering can help even the playing field among any mixed group (particularly on higher engine classes, where even very good players may find themselves hurling off the track).</p>
<p>But as you get better and better at the game, Smart Steering begins to help less and less…until eventually, it starts getting in the way instead.</p>
<p><img src="/images/post_images/impact.png" alt="A chart demonstrating the above paragraph; as skill level increases, the impact of usage goes from entirely positive to entirely negative."></p>
<p>Smart Steering will prevent you from taking shortcuts, for one thing; it can’t tell <em>why</em> you’re going off the main road, but it jumps in the way and prevents you from doing so regardless. It may even intervene unexpectedly, pushing you off your intended course at inopportune moments.</p>
<p>You might have a strategic reason in mind for going off the road (maybe you were avoiding a ruinous obstacle, for example), but Smart Steering won’t allow it regardless.</p>
<p>Plus, as a balancing feature, the game’s strongest speed boosts are disabled for players utilizing Smart Steering.</p>
<aside class="pull-quote svelte-omo24t" aria-hidden="true" hidden><p>The more skilled you are, the more this feature designed to augment your abilities instead begins to inhibit them. But whether it makes you better or worse—and to what degree—will depend entirely on where you’re coming from.</p>
</aside>

<p class="callout svelte-rzjeng"></p>
<p>The more skilled you are, the more this feature designed to augment your abilities instead begins to inhibit them. But whether it makes you better or worse—and to what degree—will depend entirely on where you’re coming from.</p>

<p>I’m a very good Mario Kart player (<em>I spent some thirty years of my life playing Mario Kart games before Smart Steering came along, after all</em>), and so I can’t stand Smart Steering. I never use it. I might not notice it a lot of the time—it might even occasionally help me—but what stands out to me are the times it jumps in my way at the worst possible moments.</p>
<p>Smart Steering might keep me on the track, but it <em>also</em> suppresses my fullest abilities. It thwarts the best outcomes just as commonly as it averts the worst disasters.</p>
<aside class="pull-quote svelte-omo24t" aria-hidden="true" hidden><p>To those sufficiently skilled with CSS, Tailwind feels like being forced to code with Smart Steering on.</p>
</aside>

<p class="callout svelte-rzjeng"></p>
<p>To those sufficiently skilled with CSS, Tailwind feels like being forced to code with Smart Steering on.</p>

<p>That’s why any conversation I have with somebody who likes Tailwind will probably be like trying to explain why I don’t like Smart Steering to a Mario Kart player who relies on it.</p>
<blockquote><p>“I don’t like that it keeps me from driving off the track.”</p>
<p>“What!? Why would you ever want to do that!?”</p>
<p>“You can actually skip ahead if you use this trick right here…”</p>
<p>“Ugh, what a hacky workaround. It’s really best practice to stay on the track, you know.”</p>
<p>“Look, I understand why you’re saying that, but I’ve been doing this for a long time, and I know what I’m doing.”</p>
<p>“I just don’t know why you’d make things harder on yourself, only to do something you’re not supposed to do anyway.”</p></blockquote>
<div class="side-note svelte-1j8wjk4"><p>I realize I might sound rather arrogant in choosing this comparison. Mario Kart is a racing game, after all, which might seem to imply that I think of myself as a winner, and people who don’t do things my way as inferior.</p>
<p>That’s not at all my intent; I only mean to point out that if Tailwind is your thing, it’s probably because we’re coming from different places, and like to play the game differently, for our own very valid reasons.</p>
</div>
<h2 id="there-are-no-benefits-without-tradeoffs"><a aria-hidden="true" tabindex="-1" href="#there-are-no-benefits-without-tradeoffs"><span class="icon icon-link"></span></a>There are no benefits without tradeoffs</h2>
<p>For the most part, it’s perfectly fine if we see the same thing in two different, even opposite ways. However, there’s one universal truth I think it’s important we agree on as common ground, namely: <em>benefits always come with tradeoffs</em> (and vice versa).</p>
<p>When it comes to frameworks, at least (CSS or otherwise), any place things seem simpler, we’re actually just experiencing the <em>upside</em> of some architectural decision. That decision, whatever it was, has downsides elsewhere; some other part of the chain, further away from our view, is now also <em>more</em> complex or difficult than it used to be.</p>
<p>Don’t get me wrong; that’s still usually a good thing. The new set of tradeoffs is often preferable to the old set; we wouldn’t use frameworks if that weren’t the case.</p>
<p>But complexity always exists, even if it’s remanded to a place you don’t regularly experience it.</p>
<aside class="pull-quote svelte-omo24t" aria-hidden="true" hidden><p>Problems in tech don’t <em>vanish</em>; they simply get reconfigured into new shapes, with new pointy edges in new places.</p>
</aside>

<p class="callout svelte-rzjeng"></p>
<p>Problems in tech don’t <em>vanish</em>; they simply get reconfigured into new shapes, with new pointy edges in new places.</p>

<p>So we should be incredibly skeptical of any framework (any <em>product</em>, really) that claims to have eliminated complexity—destroyed it, turned it into nothing—without being honest about the byproducts.</p>
<p>Ok, fine. Why is this all important?</p>
<p>Because Tailwind is often marketed (and spoken of by many of its proponents) as a framework that’s achieved this impossible task of obliterating CSS’s complexity from existence.</p>
<p>If you would make this argument, I would firmly dissent. But I would also agree you’re probably right <em>in your case</em>.</p>
<aside class="pull-quote svelte-omo24t" aria-hidden="true" hidden><p>You likely don’t work in the areas where the tradeoffs are, so they might seem like they don’t exist to you.</p>
</aside>

<p class="callout svelte-rzjeng"></p>
<p>You likely don’t work in the areas where the tradeoffs are, so they might seem like they don’t exist to you.</p>

<p>Boring and lazily centrist as it may sound: I think we have to agree that Tailwind and vanilla CSS are both unique sets of tradeoffs. Whether we consider one better than the other will depend very much on where we spend our time, what we value, and what we ultimately consider to be <em>the point</em> of all of this.</p>
<p>Let’s be fair: CSS <em>does</em> have myriad complexities and pitfalls, and Tailwind admittedly smooths out many of those rough edges, in various ways.</p>
<p>But CSS is <em>also</em> an incredibly powerful programming language, which Tailwind diminishes, creating liabilities of its own along the way.</p>
<p>The only <em>invalid</em> point of view is that you can have all benefits and no downsides. It just doesn’t work that way.</p>
<p><em>It all depends™.</em></p>
<h2 id="the-divide-where-do-you-want-to-be"><a aria-hidden="true" tabindex="-1" href="#the-divide-where-do-you-want-to-be"><span class="icon icon-link"></span></a>The divide: where do you want to be?</h2>
<p>So if what we actually disagree on is what we value, that naturally begs the question: where does this divide come from?</p>
<p>To me, the gap between Tailwind supporters and critics comes down to what part of the job they consider to be the most important, or perhaps, which part they just prefer to focus on.</p>
<p>Because continuing to come up with synonyms for supporters and detractors is tedious, for the sake of this section, I propose we give the opposing groups names. These names will, in themselves, be coarse generalizations, which means they will have obvious outliers and glaring contradictions. But for the sake of a model that is hopefully useful despite its flaws:</p>
<aside class="pull-quote svelte-omo24t" aria-hidden="true" hidden><p>Let’s call the generally pro-Tailwind group <em>Builders</em>, and let’s call the generally anti-Tailwind group <em>Crafters</em>.</p>
</aside>

<p class="callout svelte-rzjeng"></p>
<p>Let’s call the generally pro-Tailwind group <em>Builders</em>, and let’s call the generally anti-Tailwind group <em>Crafters</em>.</p>

<p>This isn’t to say that Crafters don’t build things, or that the Builders aren’t skilled craftspeople. But as a quick and messy shorthand, let’s go with it for a moment, because I think it hints at the values of these two groups.</p>
<h3 id="builders"><a aria-hidden="true" tabindex="-1" href="#builders"><span class="icon icon-link"></span></a>Builders</h3>
<p>Builders clearly value getting the work done as quickly and efficiently as possible. They are making something—likely something with parts beyond the frontend—and are eager to see it through to completion.</p>
<p>Builders tend to tout Tailwind as the saving grace that got rid of the hard parts of CSS, after all. They like that Tailwind makes the work tidy and fast.</p>
<p>That, in turn, strongly implies Builders value getting through this particular part of their work as quickly and easily as possible. (We all value efficient productivity, of course. But <em>where</em> you value it may implicitly say something about your priorities.)</p>
<p>This also implies one or both of the following: either a) that they found this work overly challenging before; and/or b) that this is not the part of their job they wish to be challenged in. They likely don’t shy away from challenge; they probably just prefer it in different form.</p>
<p>Again: exceptions and outliers will be plentiful, of course. But: as a group, Builders tend to be people who’ve spent their careers, if not in other parts of the stack, then at least in other areas of frontend. That is: for most Builders (though not all), CSS is not a specialty—or at any rate, not a priority. Many people who like Tailwind are also very good at CSS, but those Builders tend to be bringing a more balanced approach, where they use Tailwind for the broad strokes of utility classes, and heavily customize the config file and/or write their own CSS to fill in the gaps.</p>
<h3 id="crafters"><a aria-hidden="true" tabindex="-1" href="#crafters"><span class="icon icon-link"></span></a>Crafters</h3>
<p>On the other side, the Crafters tend to be seasoned CSS specialists, and almost always enjoy the part of the work that Tailwind is supposed to make easier. It’s fair to say they’ve overcome the challenge presented by CSS—or, at least, that this is where they <em>like</em> to be challenged.</p>
<p>Crafters may be building holistic products and projects, just like Builders. But Crafters generally are less focused on <em>getting through</em> the frontend as a <em>part</em> of that work, and instead see the frontend as <em>the product itself</em>.</p>
<p>Because of their skills with (or willingness to be challenged by) CSS, Crafters often see Tailwind as a blunt instrument that dampens their abilities. At worst, Tailwind locks off the best parts of both CSS and of their jobs. (Tailwind can’t keep up with new CSS features, and even where it can, it can’t implement everything or do everything that CSS can.) At best, it represents a hefty learning curve, just to get back to where they already are.</p>
<p>Speed isn’t an issue for Crafters—or at least, not a priority; they are more concerned with the handiwork of their product. Styling is exactly where they want to be, because they value doing the work uniquely well over doing it well enough. Again, they see this work as central and defining to the product, and not just a detail of it.</p>
<h3 id="builders-and-crafters"><a aria-hidden="true" tabindex="-1" href="#builders-and-crafters"><span class="icon icon-link"></span></a>Builders and Crafters</h3>
<p>As <a href="https://adactio.com/journal/18982" rel="nofollow">Jeremy Keith put it so well</a>: where it comes to styling, Builders want imperative programming; they want to specify what they want, where they want, how they want it. No surprises.</p>
<p>Crafters instead want declarative programming; they understand how to wield the power of creating rules of governance within a complex system, and wish to use that power, rather than <a href="https://buildexcellentwebsit.es/" rel="nofollow">micromanaging the browser</a>.</p>
<p>Both Builders and Crafters have fully valid points of view. And in fairness, as I implied earlier, there exists a rich gradient of options between the two. You can balance workmanship and craftsmanship. You can use Tailwind only as much as you choose, and opt to reach for hand-authored CSS the rest of the time.</p>
<p>The question is really just what you value, and where you want to spend your time.</p>
<h2 id="conclusion-my-point-of-view-on-tailwind"><a aria-hidden="true" tabindex="-1" href="#conclusion-my-point-of-view-on-tailwind"><span class="icon icon-link"></span></a>Conclusion: my point of view on Tailwind</h2>
<p>To continue using the distinctions above: I consider myself a Crafter. I am, therefore, wary of any tool that nudges me towards building things a certain way—<em>especially</em> when it’s proliferated across my profession, and has become so popular you can tell most websites built with it at a glance.</p>
<aside class="pull-quote svelte-omo24t" aria-hidden="true" hidden><p>In my view, the more you optimize for building quickly, the more you optimize for homogeneity.</p>
</aside>

<p class="callout svelte-rzjeng"></p>
<p>In my view, the more you optimize for building quickly, the more you optimize for homogeneity.</p>

<p>I acknowledge that Tailwind might be a great solution, if its downsides are not issues for you, or if you have other means of mitigating them.</p>
<p>If it solves your problems, by all means, disregard my qualms as the ramblings of an old man yelling at a Tailwind-shaped cloud. It’s only a tool, after all. It shouldn’t be something we have to agree on if we’re not working together, let alone a pillar of anyone’s identity.</p>
<p>But to me, Tailwind <em>is</em> a problem in and of itself. The tradeoffs may be a net benefit for your use cases, and if so, that’s great. I’ve tested Tailwind pretty thoroughly, however, and I’ve concluded that it is <em>not</em> a net positive in my case. I don’t mind working with it on a team (it <em>is</em> useful as a unifying system, after all), but at the very least, I request the freedom to break out of it at my discretion as needed and as it’s useful. I feel <em>anyone</em> working with Tailwind should have this autonomy. I’d even go so far as to say you’re suppressing your Crafters if you <em>don’t</em> allow them that.</p>
<p>I do not care how fast I build, or how easily I prototype, so much as I care that I am building something uniquely good, and building it the right way.</p>
<p>Besides: I would argue that the last few years of growth in browser CSS, as well as frontend frameworks, have rendered Tailwind’s benefits largely moot for many use cases. We have <a href="https://fullystacked.net/posts/scope-in-css/" rel="nofollow"><code>@scope</code> in CSS now</a>. We have <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" rel="nofollow">cascade layers</a>. Even if you don’t want to reach for those from the platform, most frontend frameworks (like <a href="https://kit.svelte.dev/" rel="nofollow">SvelteKit</a>, <a href="https://vuejs.org" rel="nofollow">Vue</a>, and <a href="https://astro.build" rel="nofollow">Astro</a>) offer scoped styling as an out-of-the-box feature. (Or you can use <a href="https://css-tricks.com/css-modules-part-1-need/" rel="nofollow">CSS modules</a>.)</p>
<p>Or, if what you like about Tailwind is the utility classes, there’s the much less intrusive <a href="https://open-props.style/" rel="nofollow">Open Props</a>.</p>
<p>Point is: I think Tailwind served the world of pre-2023 frontend development quite well. I don’t expect fans or organizations to move, but I <em>do</em> think we’re actively outgrowing the need for it right now. Most of the answers Tailwind provided weren’t otherwise readily available at the time, but they’re now becoming more and more just parts of the platform, and of the other tools we’re already using anyway.</p>
<h3 id="some-backstory"><a aria-hidden="true" tabindex="-1" href="#some-backstory"><span class="icon icon-link"></span></a>Some backstory</h3>
<p>There was a time in my career when I, along with the rest of the frontend engineers I worked with, were <em>forced</em> to write absolutely <em>everything</em> in Tailwind. There literally wasn’t a stylesheet to even put CSS into; it was forbidden. We couldn’t even edit the Tailwind config file for most of the time I was there. The powers at that company decided that was the best way to keep us all consistent. If it wasn’t Tailwind, it didn’t ship.</p>
<p>(<em>Everybody I’ve told this to finds it bafflingly ridiculous. Even the most ardent Tailwind fans cite the ability to simply break out of it and write CSS any time as a necessary and beneficial feature. Nonetheless, it was our reality.</em>)</p>
<p>Clearly, there was a sharp lack of representation in the room when that decision was made.</p>
<p>We, the frontend team, tried reasoning with the more senior and more backend-focused developers in charge of this tooling decision; tried to explain why an all-Tailwind, no-CSS approach was not just crippling our ability to execute on our designers’ creations, but forcing us into questionable architecture choices as well. (Custom components proliferated out of control, to the point that it almost didn’t make sense to have components at all.)</p>
<p>We also explained how this change was having adverse effects, both on the workers and the work. By putting our best tools just out of reach, we were forced to put more effort into crude workarounds, just to achieve mediocre results.</p>
<p>We weren’t happy, and neither were the designers whose work we were implementing. (<em>Try explaining to a designer that what they want would be not only possible, but relatively trivial, if you weren’t locked into a Tailwind-only world.</em>)</p>
<p>Besides, this just resulted in JIT styles being abused all over the place. The compiled stylesheet on the project had ballooned to unreasonable scale, because every team was just implementing their own one-offs willy-nilly.</p>
<aside class="pull-quote svelte-omo24t" aria-hidden="true" hidden><p>Both the process and the output suffered; things were harder to build, and they turned out worse.</p>
</aside>

<p class="callout svelte-rzjeng"></p>
<p>Both the process and the output suffered; things were harder to build, and they turned out worse.</p>

<p>Unfortunately, try as we did, those explanations were summarily dismissed. It was just like the Mario Kart conversation from earlier; <em>why could you possibly want to go off the track? You’re not supposed to do that!</em></p>
<p>To the powers in that company, Tailwind <em>was</em> the be-all, end-all solution. In their minds, anybody who was complaining just didn’t understand, or didn’t know what they were doing.</p>
<p>They couldn’t fathom the downsides.</p>
<p>In the months that followed, many of my colleagues transferred to other teams in other areas of the company. Some (like me) left entirely. That admittedly wasn’t my main reason, and I suspect it wasn’t anyone else’s either. But still: being creatively stifled by people who don’t try to understand your problems and don’t really trust that you even know what you’re talking about to begin with…well, it has a way of sticking with you.</p>
<p>I think often about what I could have said in those conversations; what might have made those more senior developers in charge of our projects understand the lose-lose situation they’d put us into; made them realize that where they saw a shining sunrise of pure upside, we saw long, dark shadows of disadvantages.</p>
<p>I don’t know if I could have. But since I’ve spent so much of this post talking about upsides and downsides, and how one person’s bug is another person’s feature, let’s close on that.</p>
<h3 id="the-two-sides-of-the-same-coin"><a aria-hidden="true" tabindex="-1" href="#the-two-sides-of-the-same-coin"><span class="icon icon-link"></span></a>The two sides of the same coin</h3>
<p>Where you might see a helpful copilot who keeps you on the track, I see a meddler who gets in the way at the worst possible moments.</p>
<p>Where Tailwind ostensibly saves you from context switching, it keeps me away from the places where I do my best work.</p>
<p>Where you see a tool that helps you get through a part of the job you either aren’t best at or just don’t enjoy, I see a missed opportunity for us to collaborate and put <em>both</em> our skillsets to optimal use. (I also see a cheapening of what I do; <em>your</em> code is considered important; <em>mine</em> is just something to be plowed through and done well enough to move on.)</p>
<p>Where you see a solved problem, I see tech debt that simply hasn’t come due yet; where you saw how easily and quickly you could write something the <em>first</em> time, I know from painful experience how difficult it will make future refactors and rewrites.</p>
<p>Where you see a tool that promises freedom, I see a lock-in mechanism that will be incredibly harrowing to undo.</p>
<p>Where you see easy prototyping and fast styling, I see a tool that’s railroading us into speed-running making all the same web pages and interfaces everybody is, too.</p>
<p>Where you see complexity simplified, I see a once-powerful tool, dulled and watered-down almost beyond recognition.</p>
<p>Where you see empowerment, I see suppression.</p>
<p>Where you see protective walls, I see a constricting cage.</p>
<p>We’re both just observing the same truths from different points of view.</p>
<p>We’re both wrong. We’re both right.</p>
<p>It just depends how we intend to navigate the course.</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>