Component approach to tailwind

[incompletude]

I find tailwind amazing to force consistency between developers on a team. It is working wonderfully for that purpose. Never the less, I'm facing two problems that really bothers me:

1. Having 10 classes on an element makes it very hard to debug. Using the browser dev tools, you have two turn classes on and off, and sometimes the very exercise to find the classes applied is mind-blowing.

2. There are lots of repeated classes on the html, which blows DRY.

How should one use a component approach to face this? Can you provide examples?

--

For now I'm using a Tailwind fork ported to sass, and I'm using components like like this:

.extra-large\:container {
    @extend .extra-large\:max-width, .margin-x-auto, .padding-x-1;
}

.hero {
    @extend .height-screen,
        .-margin-top-4,
        extra-large\:-margin-top-5,
        .padding-top-4,
        .extra-large\:padding-top-5;
    @extend .flex, .flex-column, .justify-center;
}

// what about this? i find useful to abstract typography because they are very important part of our job. and i have been using BEM for it and typography by component approach:
// the hml is good, but debug like this is still a mess

.header {
    @extend .height-4, .extra-large\:height-5;
    @extend .flex, .justify-between, .items-center;

    & .p {
        @extend .font-family-roboto,
            .font-weight-normal,
            .font-size-18,
            .line-height-24;
        @extend .color-dark-gray;
    }

    & .p--small {
        @extend .font-family-roboto,
            .font-weight-normal,
            .font-size-17,
            .line-height-24;
        @extend .color-light-gray;
    }

    & .anchor {
        @extend .hover\:color-green;
        @extend .no-underline;
        @extend .transition-color, .transition-fast, .transition-linear;
    }
}

        <header class="header">
            <h1>
                <a class="p anchor" href="/">name</a>
                <p class="p--small">description</p>
            </h1>
         </header>

What are your toughts on that?

[adamwathan]

Hey! So first things first, have you read our documentation on extracting components?

Extracting Components

It talks about how to use Tailwind's @apply directive to do this sort of thing and explains some best practices.

In general, Tailwind encourages a utility-first workflow, where you build all new UI using pure utilities, and only extract components when you actually have real duplication to deal with.

We define real duplication as situations where you have multiple elements that look the same in some regard, and you always want to change how they look as a group. Buttons are a good example of this, and that's the example we use in the documentation.

I probably wouldn't be creating the classes you are creating in that example, unless you are using the .hero class many times in many different templates. If you only have one hero that looks like that, what's the point in creating an abstraction for it? It makes your HTML look a bit neater, but you've bloated your CSS for no benefit because you don't actually have any duplication to deal with.

The last thing worth mentioning is that I would highly encourage you to use proper Tailwind via PostCSS instead of the Sass version, because @extend in Sass is really bad for troubleshooting and maintainability. It changes the source order of your CSS which can make it very confusing why adding a utility to some element isn't working.

Here's a Codepen that demonstrates the issue:

https://codepen.io/adamwathan/pen/paJQyL/

You should prefer mixins to using extend, and @apply in Tailwind works like a mixin 👍

Can you explain what you mean in more detail about debugging being hard? My experience is that using single purpose utilities makes debugging in dev tools a lot easier because toggling a single class on and off is only going to do one localized thing.

[incompletude]

I'm a interface designer and a coder and found myself in trouble trying to guarantee consistence across my team. It is very hard for them to think as I do about design and code (I'm the front end lead). Tailwind concept provided the consistency because I do write the basic classes and my team just consumes them, but now I realize maybe SASS is the wrong tool for this. Mixins don't allow special characters so extra-large:container must be named something else (and I really like this notation), also the include and placeholders directives makes the code a mess to debug.

So I think the proper way to do this is to shift my team to use PostCSS.

[clintongreen]

MHO

1. Adding each style individually makes it easier to debug than one class with ten styles.
2. The repeated classes actually aid DRY because you have no duplication in your stylesheet.