Duplicate tailwind classnames after using add command

morgan-bp commented 1 year ago

I keep getting duplicate tailwind classnames after running add For example

npx shadcn-ui@latest add checkbox

Then in my checkbox.tsx, there's duplicate border color border-gray-200 and border-gray-900.

There's also the same duplicate border color for the dark variant dark:border-gray-800 and dark:border-gray-50

This also happens with other components as well.

servesh-chaturvedi commented 1 year ago

Hi, can you share your repo details?

morgan-bp commented 1 year ago

Here's some of the relevant config files

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      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"), require("@tailwindcss/forms")],
};

shadcn component.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "styles/globals.css",
    "baseColor": "gray",
    "cssVariables": false
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/utils/cn"
  }
}

package.json

{
  "name": "removed",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.14",
    "@heroicons/react": "^2.0.18",
    "@hookform/resolvers": "^3.1.1",
    "@next/font": "13.1.1",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-select": "^1.2.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.4",
    "@radix-ui/react-toggle": "^1.0.3",
    "@react-oauth/google": "^0.11.0",
    "@tailwindcss/forms": "^0.5.3",
    "@tanstack/react-table": "^8.9.2",
    "@types/node": "18.11.18",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10",
    "class-variance-authority": "^0.6.0",
    "clsx": "^1.2.1",
    "eslint": "8.31.0",
    "eslint-config-next": "13.1.1",
    "jwt-decode": "^3.1.2",
    "lucide-react": "^0.248.0",
    "next": "13.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.45.0",
    "react-query": "^3.39.3",
    "tailwind-merge": "^1.13.2",
    "tailwindcss-animate": "^1.0.6",
    "typescript": "4.9.4",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@types/google.accounts": "^0.0.7",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "prettier": "2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "tailwindcss": "^3.2.4"
  }
}

pschaub commented 1 year ago

This could be the same issue as https://github.com/shadcn-ui/ui/issues/692

shadcn-ui / ui

Duplicate tailwind classnames after using add command #905