Theo's Typesafe Cult•10mo ago

shadcn/ui is not really working ,it's rendering the elements but the styles are not there

The settings code: https://paste.gg/p/anonymous/1c892ec175414194b78aabc303312bc8 If any more information, please tell me what you need

Solution:

This is the file structure

Jump to solution

16 Replies

Solution

gave_one•10mo ago

This is the file structure

JEM•10mo ago

Check in components.json that you are pointing to the correct global css file

RockBacon•10mo ago

css variables are set to false in components.json but seem to used in tailwind.config file. You would have to set this true and then reInstall all the components; Because as far as I am aware, when components are installed they are generated off of the components.json file. I am new too and it is pulling out my hair as theoDisgusted

https://discord.com/channels/966627436387266600/1140597617156431873

Circus•9mo ago

@gave_one Did you ever get a solution to this? I'm having the same issue and did all the steps you have as well

Tomate Malicioso•9mo ago

Are you sure Tailwind is properly configured? This happened to me because I was overriding the theme instead of extending it. If you don't use CSS variables ShadCN relies on Tailwind variables for styling. Jeez sorry for necroposting, opened the questions forum and thought this was newer.

Circus•9mo ago

@Tomate Malicioso Can you elaborate on what you mean ? You could be right - the issue OP (& I) are having is getting the styling passed through using the T3 file structure (pages dir)

Tomate Malicioso•9mo ago

You need to: 1. Make sure you're properly setting the content value, which the t3 stacks does for you. (this makes sure Tailwind sources the correct files) 2. Extend rather than override the default theme, if you add a color to theme: { colors } rather than theme: { extends: { colors }} you're essentially wiping all built-in Tailwind colors, which ShadCN relies on. https://tailwindcss.com/docs/theme When you install ShadCN components, they're not part of an independent component library, but rather part of your project, if it can't get your styles, it's most likely an issue caused by Tailwind's configuration. OP marked this as solved, without providing their actual solution, which is weird.

Circus•9mo ago

@Tomate Malicioso Can't speak for OP, but I think we were having the exact same issue and we are (hopefully) using the Tailwind theme properly (attachd tailwind.config.ts for reference). I think I understand and agree with you, but maybe I'm missing something too

import { type Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";

export default {
  darkMode: ["class", '[data-theme="dark"]'],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {...},
      fontFamily: {...},
      borderRadius: {...},
      keyframes: {...},
      animation: {...},
    },
  },
  plugins: [
    require("tailwindcss-animate"),
  ],
} satisfies Config;

import { type Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";

export default {
  darkMode: ["class", '[data-theme="dark"]'],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {...},
      fontFamily: {...},
      borderRadius: {...},
      keyframes: {...},
      animation: {...},
    },
  },
  plugins: [
    require("tailwindcss-animate"),
  ],
} satisfies Config;

Tomate Malicioso•9mo ago

Yes! Atleast using extend did solve my issue. If you set Tailwind built-in styles in other parts of your code and it doesn't work, then that's most likely the issue.

Circus•9mo ago

Apologies again, I don't know what you mean by that, but Tailwind is set up just as T3 has it. I have a very basic setup with virtually no extra config manipulation

Tomate Malicioso•9mo ago

If you set like, bg-green-200 on other elements on yout layout, does it apply the color?

Circus•9mo ago

Yes, Tailwind works across the app (although other styles start to break when implementing the shad config)

Tomate Malicioso•8mo ago

Which styles? Sorry I come and go, will start following this thread. I forget this doesn't notify me unless I set it to do so

Circus•8mo ago

No worries - font styles, some colors and default background colors have been altered when bringing in Shadcn In relatively good news, I used the repo below to copy-paste some of their values over and got styles to come in. I couldn't tell you what the issue is and styles are still not showing up properly, but with some tinkering, I think it can be used. https://github.com/FleetAdmiralJakob/t3-with-app-router-with-shadcn For anyone else reading this trying to get Shadcn to work with T3, I can NOT honestly give a positive recommendation at this time and it's probably worth waiting for updates or using a different library.

Second State•7mo ago

Sorry for the ping, is this still the case, or did you make any advancements in it? I have also found that repo as well, but it's making me insane that if I do create t3-app + add shadcn 1:1 how the owner did it, I get a shitty off styled calendar (and other components), if I clone that repo, I get a properly styled one Facepalm

. I can't seem to figure out what the hell is causing this, tried everything from npm,pnpm, bun, running this crap in a docker container on linux, etc, but holy shit, is this annoying. (ps. I also got the same issue by just creating a regular next app.)

Second State•7mo ago

well, there is no fucking way. lol './@/**/*.{ts,tsx}', solves it, that's why that repo worked vs mine didnt, since components are in @

Gaming

Programming

shadcn/ui is not really working ,it's rendering the elements but the styles are not there