Tailwind overrides base font-size defined in the html tag on the custom media queries

Description of the problem


theme: {
extend: {
screens: {
xs: "48rem", // 480px
sm: "64rem", // 640px
md: "76.8rem", // 768px
lg: "102.4rem", // 1024px
xl: "128rem", // 1280px
"2xl": "135rem", // 1350px
"3xl": "153.6rem", // 1536px
},
spacing: {
"sp-xs": "var(--sp-xs)",
"sp-sm": "var(--sp-sm)",
"sp-md": "var(--sp-md)",
"sp-lg": "var(--sp-lg)",
"sp-xl": "var(--sp-xl)",
"sp-2xl": "var(--sp-2xl)",
"sp-3xl": "var(--sp-3xl)",
"sp-4xl": "var(--sp-4xl)",
"sp-5xl": "var(--sp-5xl)",
"sp-6xl": "var(--sp-6xl)",


This is my tailwind.config.js in my angular application. Everything in the configuration is working as intended except for the custom media queries.

html {
font-size: 62.5%;
}

@media (min-width: 480px) {
html {
font-size: 10px;
}
}


In the root file I override default font-size of the page to 62.5% which is 10px for most of users considering that by default browser font-size is 16px.

This font-size is applied everywhere in my application correctly. Meaning that tailwind interprets any rems that I used be it in variable or in the class of html tag as custom value.

Example: class="flex size-[4.8rem]" is 48px and it is correct.

But when it comes to the screens section of the tailwind.config.js it calculates the values based on the initial default font-size value which is 16px.

Meaning that the screen breakpoint

xs: "48rem" should be 10 * 48 = 480 px but it is 16 * 48 = 768px.

Tailwind recognizes custom breakpoints that I used, but it calculates their pixels based on wrong font-size which is not an issue for me but will be hard for other developers understand what is going on and this is not intuitive at all.

What I tried

1. I tried defining base font-size in the tailwind.config.js and it didn't work
2. Redefining font-size in the media query which can be seen from the tailwind.config.js that I pasted above.

None of these helped.

Versions

• Angular 14
• Tailwind 3.4.17
• PostCSS 8.5.1

Continue reading...