css Question posted in
Some basic documentation can be found here.

Css – tailwind using in-between classes

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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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;
      },
    },
  },
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search