Tailwindcss: Standard names for Leading/Tracking

[HellPat]

or as we call them in Tailwind, leadings

and

or as we call them in Tailwind, tracking

while beeing a correct name, it's not really intuitive IMO.
We are all comfortable with developing in css and over the years line-height and letter-spacing became familiar to everyone an I do not really see the point in renaming that thing while the CSS-Spec contains line-height and letter-spacing.

What was your point in that, maybe I've overseen it?

[reinink]

Hey there @psren, thanks for this feedback. We actually debated this one at length, and those were considerations of ours as well.

In the end we decided on .tracking and .leading primarily because they were shorter, and of course they are technically the proper words to describe this typography treatment.

That said, this type of feedback is quite helpful. It gives us a sense of what naming decisions are not feeling right to the end users. If we get enough complaints about a specific name, we'll definitely look at changing it.

Thanks again! 👍

[HellPat]

Thanks for your detailed answer.
I understand the point and it is nearly impossible to choose the right naming for everyone.
Maybe it will feel more comfortable after using tailwindcss for a while.

[reinink]

For sure! To be honest I even had this as we decided on certain utility names. As you would expect working on a project like this with a few contributors, you can't possibly get your way each time. It really came down to the person with the most compelling arguments, which I think has led to a set of natural feeling, common sense utility classes.

[mikebronner]

Just as a point of view from another outsider: I think it is good that the propper typesetting terminology is used. That changes the discussion from a technical one to a contextual one, where technical CSS jargon is removed from the discussion, and designers immediately understand what is implied, even if they don't know CSS. :) I appreciate that move in naming :) Thanks!

[adamwathan]

What @mikebronner said is basically the argument I had to make when fighting to name these utilities this way 😄

A lot of functional/atomic/utility frameworks are very strict about trying to mirror CSS properties 1:1, but with Tailwind I really want to try and sit just one level higher in the abstraction tree when possible. Sometimes the right decision is to stay close to the CSS, but other times I think it's nicer for things to named based on the goal you're trying to achieve and let the CSS specifics just be an implementation detail.

Our .normal-case utility is a good example of this. Here's an example of where you might use that utility to undo some capitalization at a larger breakpoint:

<div class="uppercase lg:normal-case"></div>

A lot of other frameworks would have named this .text-transform-none or similar, but in my opinion, the way that looks in actual usage is just too implementation detail-focused:

<div class="uppercase lg:text-transform-none"></div>

The leading and tracking utilities are not quite as extreme as this case and I totally understand the argument for naming them line-height and letter-spacing, but this general frame of mind is what lead me to push for the tracking and leading names.

Thanks for your input @psren, super appreciate your efforts to get involved so early with the project! 👍

[missmatsuko]

functional/atomic/utility frameworks are very strict about trying to mirror CSS properties 1:1

@adamwathan which frameworks are these?

[hacknug]

@missmatsuko Tachyons uses .lh-name for line-height related classes and TurretCSS uses .line-height-name, for example.