I had styling for everythign in my React and wanted to add shadcn/ui for some other components. It disrupted all the other syles and I am not informed enought to understand why. I am sharing the tailwind.config.js and package.json. If not enough, please have a look at the repo: https://github.com/nijat21/fincipline.git. Would appreciate the help!

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{js,jsx}',
    './components/**/*.{js,jsx}',
    './app/**/*.{js,jsx}',
    './src/**/*.{js,jsx}',
    './index.html'
  ],
  prefix: "yes",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      grayscale: {
        '50': '50%', // Custom grayscale value
      },
      backgroundImage: {
        'bkg': "url('/assets/background.jpg')",
      },
      height: {
        'home-screen': '88vh',
        'half-screen': '64vh',
        'screen': '94vh',
        '2screen': '188vh', // 2 times the screen height
        '3screen': '282vh', // 3 times the screen height
      },
      screens: {
        'md': '950px'
      },

      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")],
};

{
  "name": "fincipline",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@radix-ui/react-icons": "^1.3.0",
    "axios": "^1.6.7",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "currency-symbol-map": "^5.1.0",
    "date-fns": "^3.6.0",
    "framer-motion": "^11.0.6",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.8.2",
    "lucide-react": "^0.378.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-plaid-link": "^3.5.1",
    "react-router-dom": "^6.22.1",
    "react-scroll": "^1.9.0",
    "react-spinners": "^0.13.8",
    "sonner": "^1.4.41",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@types/node": "^20.12.11",
    "@types/react": "^18.2.56",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.56.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "postcss": "^8.4.38",
    "postcss-nesting": "^12.1.0",
    "tailwindcss": "^3.4.1",
    "vite": "^5.1.4"
  }
}

Haven’t done a deep dive yet. But there’s only one component (Table) that I have implemented from Shadcn and commenting it out won’t solve the issue. I suspect the issue is caused by discrepancies bewteen table component installed and tailwind.config.js. Following is the table component:

import * as React from "react";

import { cn } from "@/lib/utils";

const Table = React.forwardRef(({ className, ...props }, ref) => (
    <div className="yesrelative yesw-full yesoverflow-auto">
        <table
            ref={ref}
            className={cn("yesw-full yescaption-bottom yestext-sm", className)}
            {...props} />
    </div>
));
Table.displayName = "Table";

const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
    <thead ref={ref} className={cn("[&_tr]:yesborder-b", className)} {...props} />
));
TableHeader.displayName = "TableHeader";

const TableBody = React.forwardRef(({ className, ...props }, ref) => (
    <tbody
        ref={ref}
        className={cn("[&_tr:last-child]:yesborder-0", className)}
        {...props} />
));
TableBody.displayName = "TableBody";

const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
    <tfoot
        ref={ref}
        className={cn(
            "yesborder-t yesbg-muted/50 yesfont-medium [&>tr]:last:yesborder-b-0",
            className
        )}
        {...props} />
));
TableFooter.displayName = "TableFooter";

const TableRow = React.forwardRef(({ className, ...props }, ref) => (
    <tr
        ref={ref}
        className={cn(
            "yesborder-b yestransition-colors hover:yesbg-muted/50 data-[state=selected]:yesbg-muted",
            className
        )}
        {...props} />
));
TableRow.displayName = "TableRow";

const TableHead = React.forwardRef(({ className, ...props }, ref) => (
    <th
        ref={ref}
        className={cn(
            "yesh-10 yespx-2 yestext-left yesalign-middle yesfont-medium yestext-muted-foreground [&:has([role=checkbox])]:yespr-0 [&>[role=checkbox]]:yestranslate-y-[2px]",
            className
        )}
        {...props} />
));
TableHead.displayName = "TableHead";

const TableCell = React.forwardRef(({ className, ...props }, ref) => (
    <td
        ref={ref}
        className={cn(
            "yesp-2 yesalign-middle [&:has([role=checkbox])]:yespr-0 [&>[role=checkbox]]:yestranslate-y-[2px]",
            className
        )}
        {...props} />
));
TableCell.displayName = "TableCell";

const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
    <caption
        ref={ref}
        className={cn("yesmt-4 yestext-sm yestext-muted-foreground", className)}
        {...props} />
));
TableCaption.displayName = "TableCaption";

export {
    Table,
    TableHeader,
    TableBody,
    TableFooter,
    TableHead,
    TableRow,
    TableCell,
    TableCaption,
};