Semantic friendly Utility-first aproache

[lasharela]

Hello, I'm wondering, maybe It's logical to use tailwindcss as it is, but instead of using all css classes in HTML, we'll use semantic friendly class names and after build apply all @apply-ed classes.

I'll try to explain what I mean:

src:

html <div class="super-div">super div content</div>

css

.super-div {
  @apply .font-bold .py-2 .px-4 .rounded;
  border-radius:50px;
}

dist:

html <div class=".font-bold .py-2 .px-4 .rounded super-div">super div content</div>

css

.super-div {
  border-radius:50px;
}

Does this make sense?

[adamwathan]

Hey @lasharela! This is an interesting idea but processing HTML is definitely way out of the scope of Tailwind itself; there's so many different templating languages that exist and weird things people can do with dynamic class names and stuff that it's just really unrealistic for us to ever maintain something like that.

That said, an approach you could use today is to not create component classes at all but instead handle that duplication in a templating language. I'm not sure what technologies you normally work with, but for example with Laravel's Blade templating language, you could create partials for components and keep the classes in there:

// partials/alert.blade.php
<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
  <p class="font-bold">{{ $title }}</p>
  <p>{{ $content }}</p>
</div>

// Using the component:

@include('partials.alert', [
    'title' => "Whoops!",
    'content' => "Sorry, we accidentally deleted all of your data.",
])

[brnpimentel]

or use @component blade directive.

But how about a table component, with many rows. The classes will be duplicated every row (tr).

<table>
    <tr>
         <td class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">lorem</td>
         <td class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">lorem</td>
         <td class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">lorem</td>
         <td class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">lorem</td>
         <td class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">lorem</td>
         <td class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">lorem</td>
         <td class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">lorem</td>
    </tr>
    <tr>
         <td class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">lorem</td>
         <td class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">lorem</td>
         <td class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">lorem</td>
         <td class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">lorem</td>
         <td class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">lorem</td>
         <td class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">lorem</td>
         <td class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">lorem</td>
    </tr>

</table>

CSS will be smaller, but HTML size will increase considerably. Any suggestions?

UPDATE Like @simonswiss tells me on twitter:

Your HTML will gzip very well, the classes are so repetitive gzip eats them.

If you use compress system on your project, this doesn't matter. See about HTTP Compression, from Nicolas Gallagher.

Good workaround Simon. Thks

[simonswiss]

I have tried the same experiment than described in the Nicholas Ghallager article, but with one of my sites built with Tachyons.

I stripped out all the class attributes from a page, and then compared both files, raw and gzipped.

Savings:

• Raw files: 42kb
• gzipped files: 1.1kb

I wouldn't worry about HTML bloat as long as gzipped is enabled on your server! 🎉

I guess you could extract a td as a blade @component if maintenance worries you. Whatever makes the most sense!