Custom sizing / units scale

[giekaton]

For image and font sizes, for paddings and margins I often use random numbers like 7, 13, 234 and so on, depending on each individual design.

Currently, I'm using Tailwind classes mostly for layout, and then inlining styles for precise sizing. For example, to have a div with a border it would be: <div class="border" style="width:17px;height:41px;"></div>

Is this the best way for dealing with custom numbers?

As I read in Tailwind docs, the sizing can be changed in config. I tried adding all 2000 options, as shown below, but the build process got stuck. It works with 100 but not 2000.

  theme: {
    spacing: {
      '1': '1px',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      [ ... ]
      '1999': '1999px',
      '2000': '2000px',
    }
  }

I was thinking, it would be great to be able to pass any variable to Tailwind, e.g. class="mt-11rem" and this would translate to: style="margin-top: 11rem;". Similarly it could work with pixels.

[simonswiss]

Hey @giekaton 👋

That's interesting because one of the things Tailwind CSS tries to solve is avoiding using magic numbers and sticking to a predefined scale of available values (design constraints), to promote consistency.

Of course, there are always specific scenarios where you may need to break out of these scales.

While inline styles will bring specificity issues (and inability to change on different breakpoints, on hover, etc), I would say that what you do (applying inline styles) is still a far better than trying to generate a spacing scale with 2000 values.

The reason your build crashes with 2000 spacing values: each of these value in the spacing object will generate classes for margin, margin-top, margin-bottom, margin-left+right, padding, padding-right... and many more.

That's a whole lotta classes! 😅

I honestly don't think this is the way Tailwind is intended to be used, and there are probably better tools if you want to use bespoke values regularly, instead of on odd occasions only.

There are "atomic libraries" that allow you to do this though, without resorting to inline styles. I'd look into something like AtomicCSS.

Hope this is useful! 👍

[giekaton]

HI @simonswiss

Thanks for the detailed answer. After thinking more about this on my own, I also got to a similar conclusion.

But then, it looks to me that Tailwind goes against its own philosophy, which is to be without predetermined opinionated limitations and to provide freedom for developers.

If you'd allow all numbers, you can still keep the preferred limited units in the documentation, though in code it would be possible to use any number.

Maybe I'm wrong, but I guess that without fixed units, there would be less classes to generate and Tailwind would be more lightweight in general.

[marcia-lima]

The following discussions might be related to yours:

• #4035
• #1617

[NikitaIT]

• Mega palettes with +50 steps on all of them #4207