Filament•7mo ago

I want to increase all font's sizes

I'm new to Filament, I'm trying to increase all fonts because it looks small, I tried modifying tailwind.config.js but it not affecting

    theme: {
        extend: {
            lineHeight: {
                3: '1.2rem',
                4: '1.6rem',
                // etc
            },
            fontSize: {
                xs: ['1.3rem', {lineHeight: '2.5rem'}],
                sm: ['1.4rem', {lineHeight: '2.7rem'}],
                base: ['1.6rem', {lineHeight: '2.8rem'}],
                // etc
            }
        },
    },

    theme: {
        extend: {
            lineHeight: {
                3: '1.2rem',
                4: '1.6rem',
                // etc
            },
            fontSize: {
                xs: ['1.3rem', {lineHeight: '2.5rem'}],
                sm: ['1.4rem', {lineHeight: '2.7rem'}],
                base: ['1.6rem', {lineHeight: '2.8rem'}],
                // etc
            }
        },
    },

What I'm doing wrong here?

Solution:

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme if you create a custom theme, you can edit the sizes ```js...

Themes - Panel Builder - Filament

Jump to solution

9 Replies

LeandroFerreira•7mo ago

Did you create a custom theme? https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

Dennis Koch•7mo ago

By the way: it’s probably easier to just adjust the font size on html element.

OsamzOP•7mo ago

but, If I want to edit whole texts size, will I add it on every html element? I didn't create a new theme, except it's required to change fonts size.

Dennis Koch•7mo ago

There is only one html element in the Dom 😅 And yes you need to create a theme because otherwise your config isn’t applied to anything.

OsamzOP•7mo ago

but when I put font size in HTML tag, this will unify all fonts sizes, isn't? I don't want this, but I will try to make a new theme, I was searching for a shorter way to do this. Thank you. --- In new theme, will I edit the css of .sm .lg ...etc, right?

Dennis Koch•7mo ago

Ah okay. Thought you wanted to increase overall. Then just do your approach and make sure you have a theme You can just go own using the Tailwind config. But you need a CSS file that get compiled with your new settings and register it with Filament

Solution

LeandroFerreira•7mo ago

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme if you create a custom theme, you can edit the sizes

...
theme: {
    fontSize: {
        'xs': '0.75rem',
        'sm': '1rem',
        'base': '1.1rem'
        ...
    }
}

...
theme: {
    fontSize: {
        'xs': '0.75rem',
        'sm': '1rem',
        'base': '1.1rem'
        ...
    }
}

Themes - Panel Builder - Filament

OsamzOP•7mo ago

Uh, thanks, now I understand that new theme cmd:

The command will create a CSS file and Tailwind Configuration file in the /resources/css/filament directory

Then, I put the my edits in this new tailwind config file, I did that, it works good, thanks for your patient, I didn't notice this line before in documentation, it's my bad.

Dennis Koch•7mo ago

You're welcome. Glad you got it working

Gaming

Programming

I want to increase all font's sizes