ui fontFamily is not applied in tailwind.config.js file

When I comment out the code below from tailwindcss.config.cjs file, I get sans-fonts displayed. Otherwise I get serif-fonts with the sans key somehow. How to get proper fonts?

fontFamily: {
    sans: ['var(--font-sans)', ...fontFamily.sans],
},

May 31 '23 23:05 lightbluepoppy

@lightbluepoppy Are you using a src directory? I had this issue but I realized I didn't update the tailwind.config content to find files within my src directory. Now I'm having an issue with it not applying to dropdown menu.

Jun 03 '23 04:06 bluengreen

@bluengreen This looks correct.

content: ['./src/**/*.{js,ts,jsx,tsx}'],

Jun 03 '23 11:06 lightbluepoppy

@lightbluepoppy I'm not using the app router so I had to do some other things that solved my dropdown menu typography issue. I needed to update the _app.tsx and the _document.tsx.

In the _document.tsx I had to add this

<body className={`min-h-screen bg-background ${fontSans.variable} font-sans antialiased`}>

and in the _app.tsx I added a html wrapper and added the font-sans there as well

<main className={`${fontSans.variable} font-sans`}>

I thought it was weird it needed to be added in both places. Not sure how relevant that is for your use case but maybe that will trigger some ideas. Good luck!

Jun 03 '23 15:06 bluengreen

So if you are following the manual install guide @lightbluepoppy you'll find this issue as the css variable is not defined anywhere when doing a manual install 'var(--font-sans)' so resolving that fails and it falls back to a serif font. You can either define that css variable in the same css file you've defined the rest of the variables or you can just remove the variable usage and just use ...fontFamily.sans

Jul 07 '23 06:07 pmabres

Docs should be updated, this got me too - https://ui.shadcn.com/docs/installation/manual

Dec 18 '23 12:12 j-5-s

Guys. have you been able to resolve the issue? I am getting same issue on my side.

Mar 08 '24 19:03 i-m-abbhay

Guys. have you been able to resolve the issue? I am getting same issue on my side.

See my proposed fix above!

Mar 08 '24 20:03 pmabres

Guys. have you been able to resolve the issue? I am getting same issue on my side.

See my proposed fix above!

Thanks @pmabres I have resolved the issue :). The issue was in tailwind.config.js file. There were two extend properties I was writing one for colors, borderRadius, animation (shadcn already written this) and one for fontFamliy (I was writing).

Mar 09 '24 04:03 i-m-abbhay

for me issue was that in root layout i was passing font.className but need to be font.variable

Mar 15 '24 16:03 da1z

Just for anyone who does not like to read @pmabres solution (a) looks like this:

from

      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },

to

      fontFamily: {
        sans: [...fontFamily.sans],
      },

Worked for me thanks!

Apr 23 '24 05:04 vespertilian

the following worked for me after adding the import statement in tailwind.config.js

import { fontFamily } from "tailwindcss/defaultTheme"

module.exports = {
..  
        theme:{
          ...
              extend: {
                    fontFamily: {
                      sans: ["var(--font-sans)", ...fontFamily.sans],
                      },
                }
          }
..
}

May 03 '24 14:05 AmarnathN

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

Jun 30 '24 23:06 shadcn

ui ui copied to clipboard

fontFamily is not applied in tailwind.config.js file

ui
ui copied to clipboard