Shadcn in Admin Panel

tim_oconnell2 years ago

12

• 

  tonymif.last year

  i turned off css variables and I still have the same issue

  
  
  
  
  

  this is shadcn's dialog
• 

  brianjmlast year

  I got it working this week. Can you paste some of your related configs?

• 

  tonymif.last year

  @import url('../../../node_modules/payloadcms-lexical-ext/build/client.css');
  
  @tailwind components;
  @tailwind utilities;
  
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
  
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
  
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
  
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
  
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
  
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
  
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
  
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
  
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
  
    --radius: 0.5rem;
  }
  
  [data-theme='dark'] {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
  
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
  
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
  
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
  
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
  
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
  
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
  
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
  
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }

  
  
  

  {
    "$schema": "https://ui.shadcn.com/schema.json",
    "style": "new-york",
    "rsc": true,
    "tsx": true,
    "tailwind": {
      "config": "tailwind.config.js",
      "css": "src/app/(payload)/custom.scss",
      "baseColor": "zinc",
      "cssVariables": false,
      "prefix": ""
    },
    "aliases": {
      "components": "@/components",
      "utils": "@/lib/utils",
      "ui": "@/components/ui",
      "lib": "@/lib",
      "hooks": "@/hooks"
    },
    "iconLibrary": "lucide"
  }

  
  
  

  /** @type {import('tailwindcss').Config} */
  export default {
      darkMode: ['selector', '[data-theme="dark"]', 'class'],
      content: [
      './components/**/*.{js,ts,jsx,tsx,mdx}',
      './@/**/*.{ts,tsx}',
      './src/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    plugins: [require("tailwindcss-animate")],
  }

• 

  brianjmlast year

  Did you update your layout.tsx as well?

• 

  tonymif.last year

  no

• 

  brianjmlast year

  https://github.com/payloadcms/payload/blob/main/examples/tailwind-shadcn-ui/src/app/(payload)/layout.tsx
• 

  tonymif.last year

  oh

  
  
  

  thanks g, i'll have a look

• 

  brianjmlast year

  You're welcome. There's this article as well but I think the example is more current.

  
  
  https://payloadcms.com/blog/how-to-setup-tailwindcss-and-shadcn-ui-in-payload
• 

  tonymif.last year

  still ran into styling issues. i'm sticking with headlessui for the time being

• 

  panahedanlast year

  I really want to be able to use a mixture of ShadCN components in my Payload website

• 

  cute_axolotl_10372last year

  @231710785460633600

  I also have a problem with shadcn.

  
  

  if in custom.scss I don't import @tailwind base; the alert-dialog is not centered.

  
  

  If I import base the style of many components is lost.

  
  

  does anyone have the same problem?

  
  

  Also the font-size of root in payload is 13px, this creates a problem with the typography of shadcn components

• 

  benjick.10 months ago

  I have the same problem. Did you solve it?

  
  
  

  It's a little bit better if add

  @tailwind base

  to

  app/(payload)/custom.scss

  and then in your

  tailwind.config.ts

  do

  
  

    corePlugins: {
      preflight: false,
    },

  
  

  Note: this is for tailwind 3