Shadcn UI installation breaks Tailwind CSS

Question

Shadcn UI (https://ui.shadcn.com/) was working fine until I just for a couple weeks until yesterday, when I ran my NextJS app in my local host and none of the tailwind was working. To debug the issue, I created a blank NextJS 13 app in a completely new file location, and everything worked fine; tailwind was working on the default nextJS 13 page. I then ran

npx shadcn-ui init

without installing any of the components. Which did not spit out any errors, but then none of the tailwind styling worked anymore.

my tailwind.config.js after instillation:

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

my utils.ts after instillation

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

the default page after instillation

EDIT: after some testing, the issue seems to be coming from the globals.css and tailwind.config.js, still not sure what about them though.

Dump

I think you would want this import { clsx, type ClassValue } from "clsx" in your utils.ts? – Member

Answer 1

In my case the Shadcn components did not find the styles exported by tailwind. As answered by @moyindavid the problem is in tailwind.config.

Solution: Add the '@' folder to the exports of the tailwind attributes.

module.exports = {
   darkMode: ["class"],
   content: [
     './pages/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',
     './app/**/*.{ts,tsx}',
     './@/**/*.{ts,tsx}', // <- HERE
     ],

Thorlay

Answer 2

If your case is similar to mine and you used the src folder to wrap the app folder, the problem comes from the tailwind config file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    ],

This is what you have. However, the content maps to the wrong directories. Update the strings in the content array using this.

content: [
    './src/app/**/*.{ts,tsx}', './src/components/**/*.{ts,tsx}',
    ],

Multicolored

This sadly did not resolve my issue. For some reason, it turned out I had to add the line @import './globals.css' in my index.css that resided in my src folder. For context, my src folder was on the same level as all my configs + held the globals.css file. So if anyone is still having issues, maybe try this? – Grecism

Answer 3

I came across a similar problem, where my form inputs started behaving in a weird way after the shadcn installation. The problem is that the installation overrides the plugins array, on the tailwind configuration file, and in my case, removed the @tailwindcss/forms. So, writing it back solved the problem. In tailwind.config.js:

module.exports = {
...
plugins: [require("@tailwindcss/forms"), require("tailwindcss-animate")],
}

Soche

Answer 4

I ran into this problem multiple times. npx shadcn-ui init will overwrite your tailwind.config.js So remember to backup your previous settings and then merge it manually.

Fishmonger

Answer 5

The reason I have found for this is because sometimes when you run

npx shadcn-ui@latest init

command, it might override your glabal css - check to make sure your previous rules are persisted

Also check the tailwind.config.ts file to make settings are persisted especially the theme.extend.colors - this might be completely overwritten. Always a good idea to commit prior to making major changes to existing projects that way you can have a reference.

Criminality

Answer 6

In my case it broke Tailwind dark mode. I bring back by simply changing darkMode property to media instead of class.

Official Documentation:

If you want to support toggling dark mode manually instead of relying on the operating system preference, use the class strategy instead of the media strategy

Scotfree

Answer 7

If your css is not being applied, verify if you have imported globals.css in src/layout.tsx

Calhoun

Answer 8

fix in tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
    './@/**/*.{ts,tsx}',
  ],

Flaggy

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Orbicular

Answer 9

If you are not using Typescript:

module.exports = {
  content: [
    './pages/**/*.{ts,tsx,js}',
    './components/**/*.{ts,tsx,js}',
    './app/**/*.{ts,tsx,js}',
    './@/**/*.{ts,tsx,js}',
  ],
...
}

Reimer

Answer 10

In my case, After installing shadcn, It created one more file "tailwind.config.js" I deleted it. It fixed all the issues. (I'm using typescript)

Townshend

Answer 11

I had this problem when I merged main branch to my customBranch I was working on in a github repo. If you have something similar like this, you can fix it by copying all the custom styles in your tailwind.config.ts file and doing

npx shadcn-ui@latest init

This will kind of factory reset your tailwind config file, you can then paste the manual styling in it which you copied earlier and it should work

Namecalling

Answer 12

Make sure that you don't have tailwind.config.js already there if you are using typescript.

Atlantean

Answer 13

A couple other things to check are:

1. Are you importing your css file in the main.tsx or App.js? import './index.css
2. Is your components.json file pointing to the correct css file? "css": "src/index.css"

Dissever