tailwind using in-between classes

Question

When using tailwind (example, setting height as per documentation here - DOCS),

we have predefined values as such

h-40    height: 10rem; /* 160px */
h-44    height: 11rem; /* 176px */

but the in between values in the range of 160px to 176px are not represented here. As we can see those 16 pixels can be devided in to blocks of 4px hence it SHOULD be

h-40    height: 10rem;    /* 160px */
h-41    height: 10.25rem; /* 164px */
h-42    height: 10.50rem; /* 168px */
h-43    height: 10.75rem; /* 172px */
h-44    height: 11rem;    /* 176px */

but when I use those values (which are not documented, they DON'T work). The workaround is to use

h-[164px], h-[168px], h-[172px]

Which is not ideal. Is there a way to use the undocumented tailwind classes such as h41, h-42, h43 without hardcoding pixel values?

You seem to be confusing "undocumented" with "don't exist, no indication they ever existed, but I want them." — miken32
– miken32, Commented Jul 31 at 21:23

rozsazoltan · Accepted Answer · 2024-06-18 09:33:23Z

1

The values increase by 0.25rem in a regular pattern. If we write a function in the tailwind.config.js file that provides the appropriate rem for each height from 1 to 96, you can declare these by default as well. If you increase the value from 96, you can further extend the default list.

tailwind.config.js

export default {
  theme: {
    extend: {
      height: () => {
        let heights = {};
        for (let i = 1; i <= 96; i++) {
          heights[i] = `${i * 0.25}rem`;
        }
        return heights;
      },
    },
  },
};

height - TailwindCSS Docs
Can use functions in the Tailwind configuration settings - TailwindCSS Docs

answered Jun 18, 2024 at 9:33

rozsazoltan

18.4k8 gold badges49 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

justanotherpeter · Accepted Answer · 2024-06-18 09:22:19Z

1

You can extend the tailwind theme like this.

export default {
  theme: {
    extend: {
      height: {
        41: '10.25rem',
        42: '10.50rem',
        43: '10.75rem',
      },
    },
  },
}

Tailwind Playground

Tailwind Docs

answered Jun 18, 2024 at 9:22

justanotherpeter

4392 silver badges6 bronze badges

Comments

rozsazoltan · Accepted Answer · 2025-07-22 12:50:27Z

From TailwindCSS v4, functional utilities are available, which would allow you to write it like this:

@utility h-* {
  height: calc(--value(integer) * 0.25rem);
}

However, by default, it is already written using --spacing like this:

@utility h-* {
  /* alias: --spacing(--value(integer)) - see docs for more info */
  height: calc(--value(integer) * var(--spacing));
}

So, you only need to set --spacing to the appropriate value (default value: 0.25rem).

@theme {
  --spacing: 0.5rem;
}

Customizing your theme: height

<script src="https://unpkg.com/@tailwindcss/[email protected]"></script>
<style type="text/tailwindcss">
@theme {
  --spacing: 0.15rem;
}
</style>

<div class="flex">
  <div class="h-43 w-53 bg-sky-100"></div>
  <div class="h-44 w-54 bg-sky-200"></div>
  <div class="h-45 w-55 bg-sky-300"></div>
</div>

Collectives™ on Stack Overflow

tailwind using in-between classes

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related