How do I override the base font size? #1611
Replies: 14 comments 25 replies
-
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure if I mean the same as @milesalex. I'm wondering if there is a way to set the base for the www.tailwindcss.com actually does set a "base font size" like this: html {
font-size:14px
}
@media (min-width:420px) {
html {
font-size:16px
}
}I think the documentation doesn't say anything about setting a "base font size". Ideally we can set these sizes in accordance with the breakpoint system. |
Beta Was this translation helpful? Give feedback.
-
|
hey do we implement this in the global css or in the tailwind config of nextjs ? |
Beta Was this translation helpful? Give feedback.
-
|
I decided I would only use tailwind classes in my nextJs 13 demo, and the way I solved the base font was by adding arbitrary values in the className of my HTML tag and targeting screen sizes. For example, I am using a 15px font size for mobile and 20px for small and bigger screens. import Link from 'next/link'
import 'tailwindcss/tailwind.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html
lang="en"
className="text-[15px] sm:text-[20px]"
>
...
<html> |
Beta Was this translation helpful? Give feedback.
-
|
If you just want to change the root font size globally and have everything else scale automatically, do it by changing the font size on the html {
font-size: 20px
} |
Beta Was this translation helpful? Give feedback.
-
|
Honestly, this is SO what I needed. I found myself ALWAYS setting different heading sizes and paddings for mobile and desktop and that's just bad for readability, writability etc. This solved almost everything. Please add the hint that something like this is helpful in the docs! :D |
Beta Was this translation helpful? Give feedback.
-
|
This 'works' in that the REM values are all changed -- but the preview available at I default to making 1rem = 10px and go from there, but the config UI still reports (and renders the fonts as if it was set to the original REM value) I really feel like this value should be configurable in the theme ....
|
Beta Was this translation helpful? Give feedback.
-
|
Guys, there is a way to solve this! You just need to put an extra property in your VSCode settings.json The result is this |
Beta Was this translation helpful? Give feedback.
-
in which file of tailwind and how we implement it exactly ? |
Beta Was this translation helpful? Give feedback.
-
|
Hah, for all of you like the neat conversion html {
font-size: 10px
}<!-- 12px from here on (as 12px is my base config value)-->
<body class="text-base">With this, you have the conversion and whatever value you put as a base |
Beta Was this translation helpful? Give feedback.
-
|
Tailwind seems to promote using rem for spacing. And being new to tailwind, I got the impression that this was in the interest of being able to automatically scale dimensions based on rem. But it seems that out of the box, tailwind does not currently support modifying the base font size via utility classes. Here is a suggestion for how to add this to tailwind - but I haven't tested it yet. This article provides a good discussion of the idea of scaling via rem and this article provides a quite interesting critical discussion of the idea as well as an interesting suggestion for how to deal with some of the pitfalls. This might be a candidate for where the skilled tailwind folks could come up with a well considered solution, like with the typography plugin. Would love to see that, @adamwathan :-) |
Beta Was this translation helpful? Give feedback.
-
|
Having a "official" way of doing this would be awesome! |
Beta Was this translation helpful? Give feedback.
-
|
It would be nice to be able to only set the base font-size for tailwind classes as well. I just found out when adding tailwind to an existing project with a base font-size of 10, all of the rem values need to be changed manually. Would be nice if you could change it in the tailwind.config somewhere. |
Beta Was this translation helpful? Give feedback.
-
|
Faced this exact issue today. Issue made sense but it really caught me off guard. Better to have a official solution. |
Beta Was this translation helpful? Give feedback.
-
|
Any luck with a simpler solution? |
Beta Was this translation helpful? Give feedback.
-
|
All what you have to do is extends the spacing values using a function in the config, for example: module.exports = {
content: ["./src/**/*.{html,ts}"],
theme: {
extend: {
spacing: () => ({
...Array.from({ length: 96 }, (_, index) => index * 0.5)
.filter((i) => i)
.reduce(
(acc, i) => ({ ...acc, [i]: `${i / (baseFontSize / 4)}rem` }),
{}
),
}),
fontSize: {
xs: [
`${(16 * 0.75) / baseFontSize}rem`, /* 12px */
{
lineHeight: `${(16 * 1) / baseFontSize}rem` /* 16px */,
},
],
sm: [
`${(16 * 0.875) / baseFontSize}rem`, /* 14px */
{
lineHeight: `${(16 * 1.25) / baseFontSize}rem` /* 20px */,
},
],
base: [
`${(16 * 1) / baseFontSize}rem`, /* 16px */
{
lineHeight: `${(16 * 1.5) / baseFontSize}rem` /* 24px */,
},
],
lg: [
`${(16 * 1.125) / baseFontSize}rem`, /* 18px */
{
lineHeight: `${(16 * 1.75) / baseFontSize}rem` /* 28px */,
},
],
xl: [
`${(16 * 1.25) / baseFontSize}rem`, /* 20px */
{
lineHeight: `${(16 * 1.75) / baseFontSize}rem` /* 28px */,
},
],
"2xl": [
`${(16 * 1.5) / baseFontSize}rem`, /* 24px */
{
ineHeight: `${(16 * 2) / baseFontSize}rem` /* 32px */,
},
],
"3xl": [
`${(16 * 1.875) / baseFontSize}rem`, /* 30px */
{
lineHeight: `${(16 * 2.25) / baseFontSize}rem` /* 36px */,
},
],
"4xl": [
`${(16 * 2.25) / baseFontSize}rem`, /* 36px */
{
lineHeight: `${(16 * 2.5) / baseFontSize}rem` /* 40px */,
},
],
"5xl": [
`${(16 * 3) / baseFontSize}rem`, /* 48px */
{
lineHeight: (16 * 1) / baseFontSize,
},
],
"6xl": [
`${(16 * 3.75) / baseFontSize}rem`, /* 60px */
{
lineHeight: (16 * 1) / baseFontSize,
},
],
"7xl": [
`${(16 * 4.5) / baseFontSize}rem`, /* 72px */
{
lineHeight: (16 * 1) / baseFontSize,
},
],
"8xl": [
`${(16 * 6) / baseFontSize}rem`, /* 96px */
{
lineHeight: (16 * 1) / baseFontSize,
},
],
"9xl": [
`${(16 * 8) / baseFontSize}rem`, /* 128px */
{
lineHeight: (16 * 1) / baseFontSize,
},
],
},
},
},
};Which the baseFontSize is 10 for your example. and adding override fontSize values. |
Beta Was this translation helpful? Give feedback.
-
|
Here's the config conversion for font size, spacing, border-radius, max-width, and line height (assuming base 10px) in case someone needs it. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for this! This was that i looking for! |
Beta Was this translation helpful? Give feedback.
-
|
how to change font weight for all the sizes? can it be added somehow into the "fontSize:" ? |
Beta Was this translation helpful? Give feedback.
-
|
@earlyaugust2 this is what I was looking for, Thanks a lot. Also if anyone is using VS code is not seeing proper base 10 font sizes in autosuggestion, set this to VS code editor settings "tailwindCSS.rootFontSize": 10 as suggested by @claudivanfilho above. |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
I wrote a small mod to iterate through the default theme and convert rem to px at a fixed size, runs in my tailwind.config.js |
Beta Was this translation helpful? Give feedback.
-
|
You my savior. |
Beta Was this translation helpful? Give feedback.
-
|
This is really bad. We have a npm package coded in tailwindcss. As soon as it got integrated we realised that it broke |
Beta Was this translation helpful? Give feedback.
-
|
You can configure all of the values in your |
Beta Was this translation helpful? Give feedback.
-
|
It would be great if we could use Use case: we create a package or control that integrates in a page that we have no control over.
|
Beta Was this translation helpful? Give feedback.
-
|
Exactly my thinking when I hit this issue |
Beta Was this translation helpful? Give feedback.
-
|
This is what I love so much about Tailwind, all I need is a basic CSS property and the entire base font can be different. It's so clean. |
Beta Was this translation helpful? Give feedback.
-
|
Figured I would leave my modification of the above answers here in case anyone needs in the future ^.^ |
Beta Was this translation helpful? Give feedback.
-
|
For anyone that is looking for a way to set the base font size to 10px but preserve the relative proportions of tailwind's utility classes, I recently published a Tailwind CSS plugin 'tailwindcss-base-font-size' that allows you to do just that. You can check it out here. Give it a try and let me know, if you have any questions! 👍 |
Beta Was this translation helpful? Give feedback.
-
|
thanks it works |
Beta Was this translation helpful? Give feedback.
-
|
@CedericPrivat thanks a lot! <3 |
Beta Was this translation helpful? Give feedback.
-
|
I'm using Next.js 14 and to achieve responsive base text size, I used @apply in the html tag block of my globals.css file between @tailwind components and @tailwind utilities like this: globals.css: This ensures that on large screens down to the small size cutoff the text will be 20pts, but any other size (i.e. below the cutoff) it will be 16. It also allows for this to be overridden by tailwind utilities if needed in places |
Beta Was this translation helpful? Give feedback.
-
|
I use this css var workaround to have a fine grained font-size control per element and keeping ratios : import { fontSize } from 'tailwindcss/defaultTheme';
const sizes = Object.keys(fontSize)
// ... config
fontSize: Object.fromEntries(sizes.map(
size => [ size, [`calc( var(--font-scale) * ${fontSize[size][0]})`, `calc( var(--font-scale) * ${fontSize[size][1].lineHeight})`] ]
))
// ... config That way you can use : @layer base {
:root{
--font-scale: 1;
}
html {
font-size: calc( 16px * var(--font-scale) );
}
}
.my-element-10px-base{
--font-scale: 0.625
}
.richtext{
--font-scale: 1.3
}That's also convenient when using multiple fonts which font-size doesn't match |
Beta Was this translation helpful? Give feedback.
and others
-
I'd like to adjust the font size system by setting the base font size. How do I set this?
Beta Was this translation helpful? Give feedback.
All reactions