Next.js Discord

Discord Forum

Shadcn styling just works on Home page

Unanswered
Neapolitan Mastiff posted this in #help-forum
Open in Discord
Neapolitan MastiffOP
I added shadcn to my project and it works fine on the Home page. The components there get displayed correctly and with the right styling. But when I add a shadcn component to a new page like I created users.tsx, the components appear unstyled. Does anyone know why that is and how to fix it?

Here is also a link to my repository, thanks alot!
https://github.com/leonard-thillmann/dev-training

18 Replies

Barbary Lion
Did you import the shadcn css into the main layout?
Neapolitan MastiffOP
@Barbary Lion this is my main layout, right? Do I also have to import shadcn manually there?
Neapolitan MastiffOP
When I try to import it like that, like shown in the official tutorial, still the bug is not fixed.
Jboncz
What does your global.css look like?
@Neapolitan Mastiff <@261533739149033472> this is my main layout, right? Do I also have to import shadcn manually there?
Jboncz
In this example you dont have any pages outside of the '/' route
Neapolitan MastiffOP
My globals.css just looks like this.
@Jboncz In this example you dont have any pages outside of the '/' route
Neapolitan MastiffOP
Can I manually add routes there?
@Neapolitan Mastiff Can I manually add routes there?
Jboncz
Uhhhh. Im confused now lol. What do you mean by this?
Make a new folder in 'app' called home. then make a file in the folder called 'page.tsx' and put this in it
export default function Page() {
  return (
    <>
      Hello
    </>
  );
}
Jboncz
const { fontFamily } = require("tailwindcss/defaultTheme")
/** @type {import('tailwindcss').Config} */

module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{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")],
}


This should be your tailwind.config.ts
Neapolitan MastiffOP
If I create a home folder in the app, the styling works inside of this new home/page.tsx file. But I need to use the getStaticProps() function. When I do that in there, an error occurs that says that I cant use this function within the app directory.
Jboncz
Because your using the app directory, which getStaticProps doesnt exsist within
Your not having issues with styling at this point. App directory =/= Pages directory.
https://nextjs.org/docs
Pages router is old, app router is new.
Neapolitan MastiffOP
Ahh alright I didnt know that. Ill watch some tutorials on that first before I continue. Thanks alot for your help and time!!
Jboncz
No problem!