Next.js Discord

Discord Forum

Shadcdn not applying the styles

Unanswered
808s and heartbreaks posted this in #help-forum
Open in Discord
808s and heartbreaksOP
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

export default function Login() {
    return <main> 
      <Input type="email" placeholder="Email" />
      <Button>Button</Button>
    </main>
  }

36 Replies

Polish Hound
your tailwind config file dameged
try to restart server or re config taileind
i restarted couple of times @Polish Hound
Polish Hound
which freamwork do u use?
next, tailwind, and shadcdn
i wanna use this with svelte
if possible
@808s and heartbreaks https://pastebin.com/XfLTyHba
Polish Hound
i don't know with svelte but here problem in tailwind . did u import this style file in main layout?
@808s and heartbreaks https://pastebin.com/XfLTyHba
Polish Hound
this css file
808s and heartbreaksOP
im new to nextjs
too
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Saturn | Doing the impossible.",
  description: "Saturn",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="dark">
      <body className={inter.className}>{children}</body>
    </html>
  );
}
@808s and heartbreaks https://pastebin.com/XfLTyHba
American Chinchilla
is this at globals.css?
808s and heartbreaksOP
yes
American Chinchilla
try to remove all custom styles shadcnui added
do the tallwind setup then install shadcn
808s and heartbreaksOP
fuck that
ian doin allat
American Chinchilla
not like its 3mins of work
@American Chinchilla not like its 3mins of work
808s and heartbreaksOP
ian doin allthat bro
https://www.shadcn-svelte.com/
ima try this
@808s and heartbreaks ian doin allthat bro
American Chinchilla
:shrug:
Polish Hound
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;

    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;

    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;

    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;

    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
use this globles.css
American Chinchilla
he seems to be using different theme
@American Chinchilla he seems to be using different theme
Polish Hound
if work than he change it
i want to send tailwind config but that bigg i can't send that
American Chinchilla
he has the same globals.css just different values this aint changing nothing
most likely the tailwind config is pointing to wrong files
@808s and heartbreaks ian doin allat
Pygmy Nuthatch
Lmao