davidbgk
/
larlet-fr-david-cache

title: Tailwind marketing and misinformation engine
url: https://nuejs.org/blog/tailwind-misinformation-engine/
hash_url: 44c12c8fbb59c7239f0f3b04bae189b7
archive_date: 2024-02-18
og_image: https://nuejs.org/img/tailwind-messaging-pillars.jpg
description: The origins of Tailwind and how it is framed against semantic CSS
favicon: https://nuejs.org/img/favicon.svg
language: 

<figure class="author">
  <a href="https://nuejs.org/blog/backstory/"><img src="https://nuejs.org/global/img/tero.png"></a>
  <figcaption>
    <h4>Tero Piirainen</h4>
    <p><a href="//twitter.com/tipiirai">@tipiirai</a></p>
  </figcaption>
</figure>
<p>Tailwind CSS was born out of this sentence:</p>

<figure class="tall"><img src="https://nuejs.org/img/adam-keynote.jpg" alt="The most reusable components are those with class names that are independent of the content." loading="lazy"><figcaption>Adam's <a href="//youtu.be/CLkxRnRQtDE?t=109">keynote speech</a> in Tailwind Connect 2023</figcaption></figure>
<p>The <a href="//youtu.be/CLkxRnRQtDE?t=109">sentence</a> is from <em>Nicolas Gallagher</em>'s article about <a href="//nicolasgallagher.com/about-html-semantics-front-end-architecture/">HTML semantics and front-end architecture</a>. It was a turning point for <em>Adam Wathan</em>, the creator and frontman of Tailwind. After reading the article he was <a href="https://adamwathan.me/css-utility-classes-and-separation-of-concerns/">"fully convinced that optimizing for reusable CSS was going to be the right choice"</a></p>
<h2 id="origins">Phase 1: The Origins of Tailwind<a href="#origins" title='Permlink for "Phase 1: The Origins of Tailwind"'></a></h2>
<p>Nicholas points out in the article that scalable HTML/CSS must <a href="//nicolasgallagher.com/about-html-semantics-front-end-architecture/">"rely on classes within the HTML to allow for the creation of reusable components"</a>. So instead of using a content-dependent class name like "news", one should use a <strong>content-independent</strong> name like "uilist" or "uilist-item":</p>
<pre glow><code language="html"><i>&lt;</i><strong>nav </strong><b>class</b><i>=</i><em>"<mark>uilist</mark>"</em><i>&gt;</i>
  <i>&lt;</i><strong>span </strong><b>class</b><i>=</i><em>"<mark>uilist-item</mark>"</em><i>&gt;</i>
    <i>.</i><i>.</i><i>.</i>
  <i>&lt;</i><i>/</i><strong>span</strong><i>&gt;</i>
<i>&lt;</i><i>/</i><strong>nav</strong><i>&gt;</i></code></pre><p>The more generic the name, the more reusable it is. He used the famous <a href="//www.stubbornella.org/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">media object</a> as a prime example of reusable CSS.</p>
<p>But that's not how Adam understood the sentence. Instead of moving towards more reusable class names, he introduced a custom grammar to inline styling rules directly to HTML:</p>

<pre glow><code language="html"><sup>&lt;!-- "uilist" --&gt;</sup>
<i>&lt;</i><strong>div </strong><b>class</b><i>=</i><i>"</i>
<dfn>  sticky top<i>-</i><em>0</em> z<i>-</i><em>40</em> w<i>-</i>full backdrop<i>-</i>blur flex<i>-</i>none</dfn>
<dfn>  transition<i>-</i>colors duration<i>-</i><em>500</em> <b>lg</b><i>:</i>z<i>-</i><em>50</em> <b>lg</b><i>:</i>border<i>-</i>b</dfn>
<dfn>  bg<i>-</i>white<i>/</i><em>95</em> <b>supports-backdrop-blur</b><i>:</i>bg<i>-</i>white<i>/</i><em>60</em></dfn>
<dfn>  <b>dark</b><i>:</i>bg<i>-</i>transparent<i>"</i><i>&gt;</i></dfn>

<sup>  &lt;!-- "uilist-item" --&gt;</sup>
  <i>&lt;</i><strong>span </strong><b>class</b><i>=</i><i>"</i>
<dfn>    py<i>-</i><em>4</em> border<i>-</i>b border<i>-</i>slate<i>-</i><em>900</em><i>/</i><em>10</em> <b>lg</b><i>:</i>px<i>-</i><em>8</em></dfn>
<dfn>    <b>lg</b><i>:</i>border<i>-</i><em>0</em> <b>dark</b><i>:</i>border<i>-</i>slate<i>-</i><em>300</em><i>/</i><em>10</em> px<i>-</i><em>4</em><i>"</i><i>&gt;</i></dfn>
    <i>.</i><i>.</i><i>.</i>
  <i>&lt;</i><i>/</i><strong>span</strong><i>&gt;</i>
<i>&lt;</i><i>/</i><strong>div</strong><i>&gt;</i></code></pre>
<p>This was quite a big step away from what Nicolas was saying, who resisted the idea of coupling visual information to elements, like everyone else in the industry back then.</p>
<p>However, in his keynote speech, Adam <a href="//youtu.be/CLkxRnRQtDE?si=mOLOiY8cKLJVb6XZ&amp;t=172">makes us believe</a> that the language he created was a prime example of Nicholas' thinking. And because Nicolas was <a href="//youtu.be/CLkxRnRQtDE?si=af_srSIFIqgmp0mc&amp;t=186">working at Twitter</a>, Adam's take on CSS should work for sites small and large.</p>
<p>On August 7, 2017, Adam wrote an article about <a href="//adamwathan.me/css-utility-classes-and-separation-of-concerns/">CSS utility classes and "Separation of Concerns"</a>. It demonstrates with cleverly chosen examples, how his new creation leads to more maintainable CSS architecture.</p>
<p>But there was a challenge: to make such a statement, he needed to reshape the established CSS best practices. So he introduced <a href="//adamwathan.me/css-utility-classes-and-separation-of-concerns/">new terms</a> to back his contradictory idea:</p>

<figure class="tall"><img src="https://nuejs.org/img/tailwind-practises.png" alt="The new terms and phrases Tailwind developers are familiar with" loading="lazy"><figcaption>The new terms and phrases Tailwind developers are familiar with</figcaption></figure>
<p>The new approach can be summarized as follows:</p>
<blockquote>
<p><a href="//tailwindcss.com/">"Semantic class names” are the reason CSS is hard to maintain</a></p>
</blockquote>
<p>This was a hefty statement as it contradicts with all the prior work and studies about CSS.</p>
<p>In his keynote speech, Adam uses <a href="https://youtu.be/CLkxRnRQtDE?si=s5bmoLnGsmbYDzMA">harsh words</a> to describe the traditional way of structuring CSS, as opposed to how Tailwind is described:</p>

<figure class="tall"><img src="https://nuejs.org/img/villain-and-hero.png" alt="Words used on the keynote speech and Tailwind website" loading="lazy"><figcaption>Words used on the keynote speech and Tailwind website</figcaption></figure>
<p>Old best practices like "semantic", "separation of concerns", or "clean" are usually quoted, which is a common way to question the validity of the word.</p>
<p>Unfair or not, this marketing scheme worked. Developers took the new terms and practices for granted and started tweeting and blogging about them. It was a gold mine for Talwind's commercial business model.</p>
<h2 id="phase2">Phase 2: Utility-first workflow<a href="#phase2" title='Permlink for "Phase 2: Utility-first workflow"'></a></h2>
<p>Once they started cashing, Tailwind wanted to make sure the users were properly onboarded and locked in to the system. They introduced <a href="https://tailwindcss.com/docs/reusing-styles">"utility-first workflow"</a></p>
<blockquote>
<p>Tailwind encourages a utility-first workflow, where designs are implemented using only low-level utility classes. This is a powerful way to avoid premature abstraction and the pain points that come with it.</p>
</blockquote>
<p>Here's how the flow works:</p>
<h3 id="step-1-onboarding">Step 1: Onboarding<a href="#step-1-onboarding" title='Permlink for "Step 1: Onboarding"'></a></h3>
<p>In the utility-first approach, the idea is to "build everything out of utilities, and later extract repeating patterns as they emerge". You are encouraged to try the system. Adam says:</p>
<blockquote>
<p><a href="//tailwindcss.com/">If you give it a chance, I really think you’ll wonder how you ever worked with CSS any other way.</a></p>
</blockquote>
<p>Sounds good, so let's try it.</p>
<p>Once installed, you quickly start to see why people enjoy Tailwind. You can write your styling in the same place as your markup and never think about semantic class names. You feel productive with all the handy shortcuts together with hot-module replacement.</p>
<h3 id="step-2-premature-abstraction">Step 2: "Premature abstraction"<a href="#step-2-premature-abstraction" title='Permlink for "Step 2: "Premature abstraction""'></a></h3>
<p>At some point, hundreds of utilities later, the code you've written doesn't look pretty. You start wondering what comes next after the utility-first step. How to clean things up?</p>
<p>Turns out there is no next step. Or it kind of exists, but it's called "premature abstraction". You can start extracting classes with @apply, but the documentation for <a href="//tailwindcss.com/docs/reusing-styles">reusing styles</a> describes it as a bad practice.</p>
<blockquote>
<p><a href="//tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction">Whatever you do, don’t use @apply just to make things look “cleaner”</a></p>
</blockquote>
<p>But what should I use @apply for if not for cleaning up? The documentation does not say. It only tells me why it should <strong>not</strong> be used.</p>
<h3 id="step-3-vendor-lock-in">Step 3: Vendor lock-in<a href="#step-3-vendor-lock-in" title='Permlink for "Step 3: Vendor lock-in"'></a></h3>
<p>So I keep coming back to the first step resulting in more and more utility classes. I'm locked inside a loop:</p>

<figure class="tall"><img src="https://nuejs.org/img/utility-first-loop.png" alt="Utility-first workflow" loading="lazy"><figcaption>Utility-first workflow</figcaption></figure>
<p>I find this a rather clever way to lock people using Tailwind, resulting in more retention, loyalty, and money.</p>
<h2 id="catalyst">Phase 3: Catalyst UI kit<a href="#catalyst" title='Permlink for "Phase 3: Catalyst UI kit"'></a></h2>
<p>In December 2023, Tailwind introduced <em>Catalyst</em> with a richer set of language expressions and a React-based UI library.</p>
<h3 id="domain-specific-language-dsl">Domain-specific language (DSL)<a href="#domain-specific-language-dsl" title='Permlink for "Domain-specific language (DSL)"'></a></h3>
<p>To keep up with the ever-evolving CSS standard Tailwind introduced another set of language literals. Over the years Tailwind has grown from a simple set of atoms to a vendor-specific language with expressions, operators, and method calls.</p>
<p>Let's look at the source code of the first button on <a href="//catalyst.tailwindui.com/">Catalyst demo page</a>:</p>

<img src="https://nuejs.org/img/tailwind-button.png" loading="lazy">
<section class="small section">
<p>The black button source code. The expressions are sorted alphabetically:</p>

</section>
<pre glow class="small"><code language="html"><i>&lt;</i><strong>button </strong><b>class</b><i>=</i><i>"</i>
  <i>[</i><i>&amp;</i>amp<i>;</i><i>&gt;</i><i>[</i><b>data-slot</b><i>=</i>icon<i>]</i><i>]</i><i>:</i><i>-</i>mx<i>-</i><em>0.5</em>
  <i>[</i><i>&amp;</i>amp<i>;</i><i>&gt;</i><i>[</i><b>data-slot</b><i>=</i>icon<i>]</i><i>]</i><i>:</i>my<i>-</i><em>0.5</em>
  <i>[</i><i>&amp;</i>amp<i>;</i><i>&gt;</i><i>[</i><b>data-slot</b><i>=</i>icon<i>]</i><i>]</i><i>:</i>shrink<i>-</i><em>0</em>
  <i>[</i><i>&amp;</i>amp<i>;</i><i>&gt;</i><i>[</i><b>data-slot</b><i>=</i>icon<i>]</i><i>]</i><i>:</i>size<i>-</i><em>5</em>
  <i>[</i><i>&amp;</i>amp<i>;</i><i>&gt;</i><i>[</i><b>data-slot</b><i>=</i>icon<i>]</i><i>]</i><i>:</i><b>sm</b><i>:</i>my<i>-</i><em>1</em>
  <i>[</i><i>&amp;</i>amp<i>;</i><i>&gt;</i><i>[</i><b>data-slot</b><i>=</i>icon<i>]</i><i>]</i><i>:</i><b>sm</b><i>:</i>size<i>-</i><em>4</em>
  <i>[</i><i>&amp;</i>amp<i>;</i><i>&gt;</i><i>[</i><b>data-slot</b><i>=</i>icon<i>]</i><i>]</i><i>:</i><b>text-</b><i>[</i><i>-</i><i>-</i>btn<i>-</i>icon<i>]</i>
  <i>[</i><i>-</i><i>-</i><b>btn-bg</b><i>:</i><b>theme</b><i>(</i>colors<i>.</i>zinc<i>.</i><em>900</em><i>)</i><i>]</i>
  <i>[</i><i>-</i><i>-</i><b>btn-border</b><i>:</i><b>theme</b><i>(</i>colors<i>.</i>zinc<i>.</i><em>950</em><i>/</i><em>90%</em><i>)</i><i>]</i>
  <i>[</i><i>-</i><i>-</i><b>btn-hover-overlay</b><i>:</i><b>theme</b><i>(</i>colors<i>.</i>white<i>/</i><em>10%</em><i>)</i><i>]</i>
  <i>[</i><i>-</i><i>-</i><b>btn-icon</b><i>:</i><b>theme</b><i>(</i>colors<i>.</i>zinc<i>.</i><em>400</em><i>)</i><i>]</i>
  <b>after</b><i>:</i><i>-</i>z<i>-</i><em>10</em>
  <b>after</b><i>:</i>absolute
  <b>after</b><i>:</i><b>data-</b><i>[</i>active<i>]</i><i>:</i><b>bg-</b><i>[</i><i>-</i><i>-</i>btn<i>-</i>hover<i>-</i>overlay<i>]</i>
  <b>after</b><i>:</i><b>data-</b><i>[</i>disabled<i>]</i><i>:</i>shadow<i>-</i>none
  <b>after</b><i>:</i><b>data-</b><i>[</i>hover<i>]</i><i>:</i><b>bg-</b><i>[</i><i>-</i><i>-</i>btn<i>-</i>hover<i>-</i>overlay<i>]</i>
  <b>after</b><i>:</i>inset<i>-</i><em>0</em>
  <b>after</b><i>:</i><b>rounded-</b><i>[</i><b>calc</b><i>(</i><b>theme</b><i>(</i>borderRadius<i>.</i>lg<i>)</i><i>-</i><em>1px</em><i>)</i><i>]</i>
  <b>after</b><i>:</i><b>shadow-</b><i>[</i><b>shadow</b><i>:</i><b>inset_0_1px_theme</b><i>(</i>colors<i>.</i>white<i>/</i><em>15%</em><i>)</i><i>]</i>
  <b>before</b><i>:</i><i>-</i>z<i>-</i><em>10</em>
  <b>before</b><i>:</i>absolute
  <b>before</b><i>:</i><b>bg-</b><i>[</i><i>-</i><i>-</i>btn<i>-</i>bg<i>]</i>
  <b>before</b><i>:</i><b>data-</b><i>[</i>disabled<i>]</i><i>:</i>shadow<i>-</i>none
  <b>before</b><i>:</i>inset<i>-</i><em>0</em>
  <b>before</b><i>:</i><b>rounded-</b><i>[</i><b>calc</b><i>(</i><b>theme</b><i>(</i>borderRadius<i>.</i>lg<i>)</i><i>-</i><em>1px</em><i>)</i><i>]</i>
  <b>before</b><i>:</i>shadow
  <b>bg-</b><i>[</i><i>-</i><i>-</i>btn<i>-</i>border<i>]</i>
  border
  border<i>-</i>transparent
  <b>dark</b><i>:</i><i>[</i><i>-</i><i>-</i><b>btn-bg</b><i>:</i><b>theme</b><i>(</i>colors<i>.</i>zinc<i>.</i><em>600</em><i>)</i><i>]</i>
  <b>dark</b><i>:</i><i>[</i><i>-</i><i>-</i><b>btn-hover-overlay</b><i>:</i><b>theme</b><i>(</i>colors<i>.</i>white<i>/</i><em>5%</em><i>)</i><i>]</i>
  <b>dark</b><i>:</i><b>after</b><i>:</i><i>-</i>inset<i>-</i>px
  <b>dark</b><i>:</i><b>after</b><i>:</i>rounded<i>-</i>lg
  <b>dark</b><i>:</i><b>before</b><i>:</i>hidden
  <b>dark</b><i>:</i><b>bg-</b><i>[</i><i>-</i><i>-</i>btn<i>-</i>bg<i>]</i>
  <b>dark</b><i>:</i>border<i>-</i>white<i>/</i><em>5</em>
  <b>dark</b><i>:</i>text<i>-</i>white
  <b>data-</b><i>[</i>active<i>]</i><i>:</i><i>[</i><i>-</i><i>-</i><b>btn-icon</b><i>:</i><b>theme</b><i>(</i>colors<i>.</i>zinc<i>.</i><em>300</em><i>)</i><i>]</i>
  <b>data-</b><i>[</i>disabled<i>]</i><i>:</i>opacity<i>-</i><em>50</em>
  <b>data-</b><i>[</i>focus<i>]</i><i>:</i>outline
  <b>data-</b><i>[</i>focus<i>]</i><i>:</i>outline<i>-</i><em>2</em>
  <b>data-</b><i>[</i>focus<i>]</i><i>:</i>outline<i>-</i>blue<i>-</i><em>500</em>
  <b>data-</b><i>[</i>focus<i>]</i><i>:</i>outline<i>-</i>offset<i>-</i><em>2</em>
  <b>data-</b><i>[</i>hover<i>]</i><i>:</i><i>[</i><i>-</i><i>-</i><b>btn-icon</b><i>:</i><b>theme</b><i>(</i>colors<i>.</i>zinc<i>.</i><em>300</em><i>)</i><i>]</i>
  <b>focus</b><i>:</i>outline<i>-</i>none
  font<i>-</i>semibold
  <b>forced-colors</b><i>:</i><i>[</i><i>-</i><i>-</i><b>btn-icon</b><i>:</i>ButtonText<i>]</i>
  <b>forced-colors</b><i>:</i><b>data-</b><i>[</i>hover<i>]</i><i>:</i><i>[</i><i>-</i><i>-</i><b>btn-icon</b><i>:</i>ButtonText<i>]</i>
  gap<i>-</i>x<i>-</i><em>2</em>
  inline<i>-</i>flex
  isolate
  items<i>-</i>center
  justify<i>-</i>center
  <b>px-</b><i>[</i><b>calc</b><i>(</i><b>theme</b><i>(</i><b>spacing</b><i>[</i><em>3.5</em><i>]</i><i>)</i><i>-</i><em>1px</em><i>)</i><i>]</i>
  <b>py-</b><i>[</i><b>calc</b><i>(</i><b>theme</b><i>(</i><b>spacing</b><i>[</i><em>2.5</em><i>]</i><i>)</i><i>-</i><em>1px</em><i>)</i><i>]</i>
  relative
  rounded<i>-</i>lg
  <b>sm</b><i>:</i><b>px-</b><i>[</i><b>calc</b><i>(</i><b>theme</b><i>(</i>spacing<i>.</i><em>3</em><i>)</i><i>-</i><em>1px</em><i>)</i><i>]</i>
  <b>sm</b><i>:</i><b>py-</b><i>[</i><b>calc</b><i>(</i><b>theme</b><i>(</i><b>spacing</b><i>[</i><em>1.5</em><i>]</i><i>)</i><i>-</i><em>1px</em><i>)</i><i>]</i>
  <b>sm</b><i>:</i>text<i>-</i>sm<i>/</i><em>6</em>
  text<i>-</i>base<i>/</i><em>6</em>
  text<i>-</i>white<i>"</i><i>&gt;</i> Button <i>&lt;</i><i>/</i><strong>button</strong><i>&gt;</i></code></pre>
<p>I have many questions about this:</p>
<p>Most importantly: how is this wall of text more maintainable than a class name like "primary"?</p>
<p>Do I need another wall for the white button?</p>
<p>Also: are there any limits to the utility-first workflow? When can I use @apply to clean things up? After 50 expressions? 100 expressions? 1000?</p>
<h3 id="modeled-after-html">"Modeled after HTML"<a href="#modeled-after-html" title='Permlink for ""Modeled after HTML""'></a></h3>
<p>Another major feature in Catalyst was a new markup language that separates all the language literals behind React components. Here's a dialog example using <a href="//catalyst.tailwindui.com/docs">Catalyst components</a>:</p>

<pre glow><code language="html"><span><i>&lt;</i><strong>Dialog</strong><i>&gt;</i></span>
<span>  <i>&lt;</i><strong>DialogTitle</strong><i>&gt;</i>Join mailing list<i>&lt;</i><i>/</i><strong>DialogTitle</strong><i>&gt;</i></span>
<span>  <i>&lt;</i><strong>DialogDescription</strong><i>&gt;</i></span>
<span>    Expect <i>&lt;</i><strong>Strong</strong><i>&gt;</i>no spamming<i>&lt;</i><i>/</i><strong>Strong</strong><i>&gt;</i></span>
<span>  <i>&lt;</i><i>/</i><strong>DialogDescription</strong><i>&gt;</i></span>
<span></span>
<span>  <i>&lt;</i><strong>DialogBody</strong><i>&gt;</i></span>
<span>    <i>&lt;</i><strong>Field</strong><i>&gt;</i></span>
<span>      <i>&lt;</i><strong>Label</strong><i>&gt;</i>Email<i>&lt;</i><i>/</i><strong>Label</strong><i>&gt;</i></span>
<span>      <i>&lt;</i><strong>Input </strong><b>name</b><i>=</i><em>"email"</em> <i>/</i><i>&gt;</i></span>
<span>    <i>&lt;</i><i>/</i><strong>Field</strong><i>&gt;</i></span>
<span>  <i>&lt;</i><i>/</i><strong>DialogBody</strong><i>&gt;</i></span>
<span></span>
<span>  <i>&lt;</i><strong>DialogActions</strong><i>&gt;</i></span>
<span>    <i>&lt;</i><strong>Button </strong>plain<i>&gt;</i>Cancel<i>&lt;</i><i>/</i><strong>Button</strong><i>&gt;</i></span>
<span>    <i>&lt;</i><strong>Button</strong><i>&gt;</i>Join<i>&lt;</i><i>/</i><strong>Button</strong><i>&gt;</i></span>
<span>  <i>&lt;</i><i>/</i><strong>DialogActions</strong><i>&gt;</i></span>
<span><i>&lt;</i><i>/</i><strong>Dialog</strong><i>&gt;</i></span></code></pre>
<p>The markup feels surprisingly similar to semantic HTML:</p>

<figure class="tall"><img src="https://nuejs.org/img/catalyst-markup.png" alt="Web standards vs vendor-specific markup" loading="lazy"><figcaption>Web standards vs vendor-specific markup</figcaption></figure>
<p>This raises more questions:</p>
<p>Most importantly: How is <code>&lt;button class="plain"&gt;</code> different from <code>&lt;Button plain&gt;</code>? Isn't this "semantic" — the root of all bad in CSS?</p>
<p>And standard HTML <code>&lt;dialog&gt;</code> is bad, but <code>&lt;Dialog&gt;</code> with uppercase is legit?</p>
<p>Why introduce so many different versions of the <code>&lt;p&gt;</code> tag?</p>
<pre glow><code language="html"><sup>&lt;!-- Catalyst &lt;p&gt; tags --&gt;</sup>
<i>&lt;</i><strong>Text</strong><i>&gt;</i>
<i>&lt;</i><strong>Description</strong><i>&gt;</i>
<i>&lt;</i><strong>DialogDescription</strong><i>&gt;</i>
<i>&lt;</i><strong>AlertDescription</strong><i>&gt;</i>
<i>.</i><i>.</i><i>.</i></code></pre><p>Why is content-aware naming okay in element names but bad in class names?</p>
<p>Is separation of concerns suddenly okay with Catalyst, but bad with vanilla HTML and CSS?</p>
<p>I'm confused, to say the least.</p>
<hr>
<h2 id="i-love-css">I love ❤️ CSS<a href="#i-love-css" title='Permlink for "I love ❤️ CSS"'></a></h2>
<p>I started web development at the age of a <code>&lt;blink&gt;</code> tag and CSS has always been my favorite part of the web development stack. I'm particularly fascinated about the crossing between design and <a href="https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/">front-of-the frontend</a>.</p>
<p>When Microsoft released <a href="https://en.wikipedia.org/wiki/Internet_Explorer_4">Internet Explorer 4.0</a> with solid support for both external stylesheets and DHTML, It nailed me to the separation of concerns pattern. I see it as the most important component for software scalability and it's particularly important with HTML and CSS. The way of organizing design has been around for centuries: there are element types and contexts. The nuanced relationship between <a href="//en.wikipedia.org/wiki/Form_follows_function">form and function</a>. CSS is the missing tool to bring foundational design-thinking to frontend development.</p>
<p>Fast forward to this date, and the solid foundation has almost disappeared. Styling is inlined and CSS is written with JavaScript. There are no element types, nor contexts. Styling is flat and not cascading. Global is feared instead of used.</p>
<p>We're using maybe 30% of the full potential.</p>
<p>I'm not a fan of any of that.</p>
<p>I recommend everyone to take a closer look to what has happened to CSS there in the past 10 years. Regardless of your current stance. It's a powerful language that far surpasses the capabilities of Tailwind. Learn to build scaleable architectures, and see how atomic class names and inline styling fit into the bigger picture.</p>
<h3 id="first-things-first-learn-css">First things first: Learn CSS<a href="#first-things-first-learn-css" title='Permlink for "First things first: Learn CSS"'></a></h3>
<p>The first step is to learn CSS. It's the ultimate design language for the web. A safe bet for years to come.</p>
<ol>
<li><p>Start from the <a href="//nicolasgallagher.com/about-html-semantics-front-end-architecture/">Nicholas's post</a> and learn the benefits of semantic naming. Understand how Adam cherry-picked one sentence and misused it to validate the contrasting practises of Tailwind.</p>
</li>
<li><p>Study MDN documentation on web standards. There's a lot, so start with the most important aspects of CSS: <a href="//developer.mozilla.org/en-US/docs/Web/CSS/Cascade">the cascade</a> and <a href="//developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Nesting_and_specificity">specificity</a>.</p>
</li>
<li><p>Take inspiration. Learn how the best developers in the game like <a href="//ryanmulligan.dev/blog/">Ryan Mulligan</a>, <a href="//ishadeed.com/">Ahmad Shadeed</a>, and <a href="//www.joshwcomeau.com/">Josh Comeau</a> use CSS in more stylish, and creative ways.</p>
</li>
</ol>
<h3 id="content-first">Content first<a href="#content-first" title='Permlink for "Content first"'></a></h3>
<p>Here's a better workflow. It has many names: "standards first", "content first", or "progressive enhancement".</p>

<figure class="tall"><img src="https://nuejs.org/img/standards-first.png" alt="Standards first model" loading="lazy"><figcaption>Standards first model</figcaption></figure>
<p>You start with a pure, semantic layout and figure out all the reusable pieces of CSS. At times, especially when building new components, you might want to prototype quickly with inline styling. But that's okay and part of the system. You can clean things up later.</p>
<blockquote>
<p>Clean code is easier to maintain</p>
</blockquote>
<p>There are no "pain points" in clean code, only benefits. This is the system I want to teach to my kids. I want them to understand how web standards work, and where all the trends come from.</p>
<p>Because trends are temporary, but standards are forever.</p>
<h3 id="stay-relevant">Stay relevant<a href="#stay-relevant" title='Permlink for "Stay relevant"'></a></h3>
<p>My guess: It's only a matter of time before Tailwind collapses. The vendor-specific language and the misleading communication cannot hold water very long. The utility soup produced today will eventually turn into a technical debt. The next generation looks back and asks: "You actually wrote <strong>that</strong>?"</p>
<p>Learn to write clean HTML and CSS and stay relevant for years to come.</p>

<img src="https://nuejs.org/img/tw-switch.png" loading="lazy" class="tall">