Font/Style not applying only on Dialog, Sheet and Drawer #4449

MaximePremont · 2024-07-29T13:03:22Z

MaximePremont
Jul 29, 2024

Hello everyone !
I'm am working on a Nextron project : Electron + Next.Js ( 14, page router ) with TypeScript and Shadcn UI.

I installed everything, and it worked fine as you can see for example on my login page :

But, I started using dialog, or in this example a sheet component. I did not modified the Shadcn components, and it looks like some style, or the font is not applying :

Is seem that all the "popups components" have this problem.

Here is my project tree with Nextron :

Here is my /renderer/pages/_app.tsx file :

import type { AppProps } from 'next/app'
import Head from 'next/head'
import React from 'react'

import '@/styles/globals.css'
import { Inter as FontSans } from 'next/font/google'
import { cn } from '../lib/utils'
import { ThemeProvider } from '@/components/theme-provider'
import { Toaster } from '@/components/ui/toaster'

const fontSans = FontSans({
  subsets: ['latin'],
  variable: '--font-sans'
})

function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>Test title</title>
      </Head>
      <main
        className={cn(
          'min-h-screen bg-background font-sans antialiased',
          fontSans.variable
        )}>
        <ThemeProvider
          attribute="class"
          defaultTheme="light">
          <Component {...pageProps} />
          <Toaster />
        </ThemeProvider>
      </main>
    </>
  )
}

export default App

Here is my tailwind.config.js file :

const { fontFamily } = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: [
    './renderer/pages/**/*.{ts,tsx}',
    './renderer/components/**/*.{ts,tsx}',
    './renderer/lib/**/*.{ts,tsx}'
  ],
  prefix: '',
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px'
      }
    },
    extend: {
      fontFamily: {
        sans: ['var(--font-sans)', ...fontFamily.sans]
      },
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))'
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))'
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))'
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))'
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))'
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))'
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))'
        }
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)'
      },
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' }
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: '0' }
        }
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out'
      }
    }
  },
  plugins: [require('tailwindcss-animate')]
}

Here is my /renderer/sytles/globals.css file :

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 20 14.3% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 20 14.3% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 14.3% 4.1%;
    --primary: 24.6 95% 53.1%;
    --primary-foreground: 60 9.1% 97.8%;
    --secondary: 60 4.8% 95.9%;
    --secondary-foreground: 24 9.8% 10%;
    --muted: 60 4.8% 95.9%;
    --muted-foreground: 25 5.3% 44.7%;
    --accent: 60 4.8% 95.9%;
    --accent-foreground: 24 9.8% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 60 9.1% 97.8%;
    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 24.6 95% 53.1%;
    --radius: 0.3rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 20 14.3% 4.1%;
    --foreground: 60 9.1% 97.8%;
    --card: 20 14.3% 4.1%;
    --card-foreground: 60 9.1% 97.8%;
    --popover: 20 14.3% 4.1%;
    --popover-foreground: 60 9.1% 97.8%;
    --primary: 20.5 90.2% 48.2%;
    --primary-foreground: 60 9.1% 97.8%;
    --secondary: 12 6.5% 15.1%;
    --secondary-foreground: 60 9.1% 97.8%;
    --muted: 12 6.5% 15.1%;
    --muted-foreground: 24 5.4% 63.9%;
    --accent: 12 6.5% 15.1%;
    --accent-foreground: 60 9.1% 97.8%;
    --destructive: 0 72.2% 50.6%;
    --destructive-foreground: 60 9.1% 97.8%;
    --border: 12 6.5% 15.1%;
    --input: 12 6.5% 15.1%;
    --ring: 20.5 90.2% 48.2%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

I tried different things without results, and despite my searches I can't understand why the problem is only with these components.

Thank you very much !

Answered by MaximePremont

Jul 30, 2024

Hello everyone !

I just found a solution :
I renamed my tailwind configuration from tailwind.config.js to tailwind.config.ts and edited the file like this :

import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    './renderer/pages/**/*.{ts,tsx}',
    './renderer/components/**/*.{ts,tsx}',
    './renderer/lib/**/*.{ts,tsx}'
	],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))…

View full answer

MaximePremont · 2024-07-30T10:05:57Z

MaximePremont
Jul 30, 2024
Author

Hello everyone !

I just found a solution :
I renamed my tailwind configuration from tailwind.config.js to tailwind.config.ts and edited the file like this :

import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    './renderer/pages/**/*.{ts,tsx}',
    './renderer/components/**/*.{ts,tsx}',
    './renderer/lib/**/*.{ts,tsx}'
	],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

0 replies

renardeinside · 2024-08-14T21:50:08Z

renardeinside
Aug 14, 2024

I have the same issue and the same configs, but they don't seem to work. Any ideas?

1 reply

MaximePremont Aug 15, 2024
Author

Hello, have you tried my previous answer : renaming from tailwind.config.js to tailwind.config.ts file and editiing it like I said ?
If yes, what is your current configuration ?

gchandra25 · 2024-08-24T15:34:52Z

gchandra25
Aug 24, 2024

`// frontend\tailwind.config.js

/** @type {import('tailwindcss').Config} /
module.exports = {
mode: "jit",
darkMode: ["class"],
content: [
"./pages/**/.{js,jsx}",
"./components//*.{js,jsx}",
"./app//.{js,jsx}",
"./src/**/.{js,jsx}",
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
zIndex: {
55: "55",
60: "60",
65: "65",
},
width: {
"24/100": "24%",
"31/100": "31%",
"45/100": "45%",
"69/100": "69%",
},
margin: {
"custom-1": "1.5rem", // Add a custom margin value
"custom-2": "3.75rem", // Add another custom margin value
13: "52px",
},
fontSize: {
"xs+": ["13px", "18px"],
xxs: ["9px", "10px"],
},
colors: {
"clubgate-blue-1": "#3a5e98",
"custom-blue": "rgba(58,94,152,1)",
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
colorPrimary: "var(--color-primary)",
colorSecondary: "var(--color-secondary)",
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
// darkMode: "class",
// theme: {
// extend: {
// colors: {
// primary: "var(--color-primary)",
// secondary: "var(--color-secondary)",
// },
// },
// },
};
`

what to do for my config.js file? i'm using js not ts

0 replies

vinibgoulart · 2025-02-27T14:39:25Z

vinibgoulart
Feb 27, 2025

nice, you basically need to remove fontFamily from tailwind.config.ts when you're using a custom next font

0 replies

bragathezz · 2025-04-30T06:59:39Z

bragathezz
Apr 30, 2025

I added like this on _document.tsx and css its working fine

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Font/Style not applying only on Dialog, Sheet and Drawer #4449

Uh oh!

{{title}}

Uh oh!

Replies: 5 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Font/Style not applying only on Dialog, Sheet and Drawer #4449

Uh oh!

MaximePremont Jul 29, 2024

Replies: 5 comments · 1 reply

Uh oh!

MaximePremont Jul 30, 2024 Author

Uh oh!

renardeinside Aug 14, 2024

Uh oh!

MaximePremont Aug 15, 2024 Author

Uh oh!

gchandra25 Aug 24, 2024

Uh oh!

vinibgoulart Feb 27, 2025

Uh oh!

bragathezz Apr 30, 2025

MaximePremont
Jul 29, 2024

Replies: 5 comments 1 reply

MaximePremont
Jul 30, 2024
Author

renardeinside
Aug 14, 2024

MaximePremont Aug 15, 2024
Author

gchandra25
Aug 24, 2024

vinibgoulart
Feb 27, 2025

bragathezz
Apr 30, 2025