@tailwind components;
@tailwind utilities;
@import '~@payloadcms/ui/scss';

:root {
  --theme-color: 0 0% 100%;
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;

  // … other theme vars …

  --nav-width: 256px;
  @include small-break {
    --nav-width: 256px;
  }
}

@layer payload-default {
  .template-default {
    grid-template-columns: 64px auto; // when nav closed

    &--nav-open {
      grid-template-columns: var(--nav-width) auto; // when nav open
    }
  }

  .nav-toggler {
    display: none;
  }
}

Screenshot (Payload admin sidebar + shadcn button):

(attached screenshot)

What’s the best way to remove Payload’s default component styles so that only Tailwind + shadcn styles apply?

Should I override Payload’s

@layer payload-default

Or can I prevent Payload’s SCSS from styling button, input, etc.?

When we add

@tailwind base;

then it works as expected, but it affect other admin components

tyteen4a038 months ago
there's no clean way of doing it at the moment, unfortunately
elabinnovations8 months ago
Thank you
@114557048678514693
your reply

What can we do then?
tyteen4a038 months ago
I don't know what the current advice is but I know some people use
@apply
in custom CSS, or just
!important
everything
elabinnovations8 months ago
@407601931100487710
Do you have any suggestions?
adrian87498 months ago
@569898451219906560

@114557048678514693

https://adrianmaj.com/en/posts/integrating-tailwindcss-with-payloadcms-complete-guide
I've prepared tutorial for that, you need to scope tailwind base to specific components and this tutorial shows you how to do this with tailwind v4 using
.twp
class

I guess that's the cleanest way to use tailwind in admin panel
elabinnovations8 months ago
Thank you
@299531596036571136

It worked 😍

After upgrading to V4, I have some issues in the frontend styles. Trying to fix
adrian87498 months ago
Didn't know you're on v3 I had previously solution for v3 too, but I don't have tutorial for v3.

But I am happy to help
elabinnovations8 months ago
NP, trying to migrate 😄
adrian87498 months ago
Okay, it shouldnt be that painful with official CLI tool, but if you give up and want to go back to v3, ping me and I'll find some old codebase with v3 fix

elabinnovations8 months ago

I am planning to use V4

Here my current global.css (just changed the import to V4)

@import 'tailwindcss';  
  
@layer base {  
  :root {  
    --background: 220 25% 98%;  
    --foreground: 220 25% 10%;  
    --card: 220 25% 100%;  
    --card-foreground: 220 25% 10%;  
    --popover: 220 25% 100%;  
    --popover-foreground: 220 25% 10%;  
    --primary: 350 80% 45%;  
    --primary-foreground: 355.7 100% 97.3%;  
    --secondary: 217 91% 60%;  
    --secondary-foreground: 220 25% 98%;  
    --muted: 220 25% 95%;  
    --muted-foreground: 220 25% 40%;  
    --accent: 217 91% 60%;  
    --accent-foreground: 220 25% 98%;  
    --destructive: 0 84.2% 60.2%;  
    --destructive-foreground: 0 0% 98%;  
    --border: 220 25% 90%;  
    --input: 220 25% 90%;  
    --ring: 350 80% 45%;  
    --radius: 0.5rem;  
    --success: 120 60% 50%;  
    --error: 0 84% 60%;  
    --warning: 38 92% 50%;  
    --primary-rgb: 187, 28, 28;  
    --secondary-rgb: 59, 130, 246;  
  }  
  
  [data-theme='dark'] {  
    --background: 220 25% 8%;  
    --foreground: 220 25% 98%;  
    --card: 220 25% 10%;  
    --card-foreground: 220 25% 98%;  
    --popover: 220 25% 10%;  
    --popover-foreground: 220 25% 98%;  
    --primary: 350 80% 55%;  
    --primary-foreground: 355.7 100% 97.3%;  
    --secondary: 217 91% 60%;  
    --secondary-foreground: 220 25% 98%;  
    --muted: 220 25% 15%;  
    --muted-foreground: 220 25% 70%;  
    --accent: 217 91% 60%;  
    --accent-foreground: 220 25% 98%;  
    --destructive: 0 62.8% 30.6%;  
    --destructive-foreground: 0 0% 98%;  
    --border: 220 25% 20%;  
    --input: 220 25% 20%;  
    --ring: 350 80% 55%;  
    --success: 120 60% 50%;  
    --error: 0 84% 60%;  
    --warning: 38 92% 50%;  
    --primary-rgb: 187, 28, 28;  
    --secondary-rgb: 59, 130, 246;  
  }  
}

  
@layer base {  
  * {  
    @apply border-border;  
  }  
  body {  
    @apply bg-background text-foreground;  
    font-family: 'Titillium Web', sans-serif;  
  }  
  code,  
  pre {  
    font-family: 'JetBrains Mono', monospace;  
  }  
}  
  
/* Custom animation for blinking cursor */  
@keyframes blink {  
  0%,  
  100% {  
    opacity: 1;  
  }  
  50% {  
    opacity: 0;  
  }  
}  
  
.animate-blink {  
  animation: blink 1s step-end infinite;  
}  
  
/* Glow effects */  
.glow {  
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.5);  
}  
  
.glow-text {  
  text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.7);  
}  
  
.glow-blue {  
  box-shadow: 0 0 15px rgba(var(--secondary-rgb), 0.5);  
}  
  
.glow-blue-text {  
  text-shadow: 0 0 10px rgba(var(--secondary-rgb), 0.7);  
}  
  
/* Futuristic grid background */  
.futuristic-grid {  
  background-image:  
    linear-gradient(to right, rgba(var(--primary-rgb), 0.05) 1px, transparent 1px),  
    linear-gradient(to bottom, rgba(var(--primary-rgb), 0.05) 1px, transparent 1px);  
  background-size: 20px 20px;  
}  
  
/* Gradient text */  
.gradient-text {  
  @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;  
}  
  
/* Hover card effect */  
.hover-card {  
  transition: all 0.3s ease;  
}  
  
.hover-card:hover {  
  transform: translateY(-5px);  
  box-shadow:  
    0 10px 25px -5px rgba(0, 0, 0, 0.1),  
    0 8px 10px -6px rgba(0, 0, 0, 0.1);  
}  
  
/* Animated border */  
@keyframes border-glow {  
  0%,  
  100% {  
    border-color: hsl(var(--primary));  
  }  
  50% {  
    border-color: hsl(var(--secondary));  
  }  
}  
  
.animate-border {  
  animation: border-glow 3s infinite;  
}  
  
/* Admin Bar Styling */  
.admin-bar {  
  border-bottom: 1px solid hsl(var(--border));  
}

and old tailwind config

import tailwindcssAnimate from 'tailwindcss-animate'  
import typography from '@tailwindcss/typography'  
  
/** @type {import('tailwindcss').Config} */  
const config = {  
  content: [  
    './pages/**/*.{ts,tsx}',  
    './components/**/*.{ts,tsx}',  
    './app/**/*.{ts,tsx}',  
    './src/**/*.{ts,tsx}',  
  ],  
  darkMode: ['selector', '[data-theme="dark"]', '[data-mode="dark"]', '.dark'],  
  plugins: [tailwindcssAnimate, typography],  
  prefix: '',  
  safelist: [  
    'lg:col-span-4',  
    'lg:col-span-6',  
    'lg:col-span-8',  
    'lg:col-span-12',  
    'border-border',  
    'bg-card',  
    'border-error',  
    'bg-error/30',  
    'border-success',  
    'bg-success/30',  
    'border-warning',  
    'bg-warning/30',  
  ],  
  theme: {  
    container: {  
      center: true,  
      padding: {  
        '2xl': '2rem',  
        DEFAULT: '1rem',  
        lg: '2rem',  
        md: '2rem',  
        sm: '1rem',  
        xl: '2rem',  
      },  
      screens: {  
        '2xl': '86rem',  
        lg: '64rem',  
        md: '48rem',  
        sm: '40rem',  
        xl: '80rem',  
      },  
    },

    extend: {  
      animation: {  
        'accordion-down': 'accordion-down 0.2s ease-out',  
        'accordion-up': 'accordion-up 0.2s ease-out',  
        'pulse-glow': 'pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',  
        blink: 'blink 1s step-end infinite',  
        'border-glow': 'border-glow 3s infinite',  
      },  
      borderRadius: {  
        lg: 'var(--radius)',  
        md: 'calc(var(--radius) - 2px)',  
        sm: 'calc(var(--radius) - 4px)',  
      },  
      colors: {  
        accent: {  
          DEFAULT: 'hsl(var(--accent))',  
          foreground: 'hsl(var(--accent-foreground))',  
        },  
        background: 'hsl(var(--background))',  
        border: 'hsla(var(--border))',  
        card: {  
          DEFAULT: 'hsl(var(--card))',  
          foreground: 'hsl(var(--card-foreground))',  
        },  
        destructive: {  
          DEFAULT: 'hsl(var(--destructive))',  
          foreground: 'hsl(var(--destructive-foreground))',  
        },  
        foreground: 'hsl(var(--foreground))',  
        input: 'hsl(var(--input))',  
        muted: {  
          DEFAULT: 'hsl(var(--muted))',  
          foreground: 'hsl(var(--muted-foreground))',  
        },

        popover: {  
          DEFAULT: 'hsl(var(--popover))',  
          foreground: 'hsl(var(--popover-foreground))',  
        },  
        primary: {  
          DEFAULT: 'hsl(var(--primary))',  
          foreground: 'hsl(var(--primary-foreground))',  
        },  
        ring: 'hsl(var(--ring))',  
        secondary: {  
          DEFAULT: 'hsl(var(--secondary))',  
          foreground: 'hsl(var(--secondary-foreground))',  
        },  
        success: 'hsl(var(--success))',  
        error: 'hsl(var(--error))',  
        warning: 'hsl(var(--warning))',  
        'primary-rgb': '187, 28, 28',  
        'secondary-rgb': '59, 130, 246',  
      },  
      fontFamily: {  
        mono: ['var(--font-jetbrains)', 'JetBrains Mono', 'monospace'],  
        sans: ['var(--font-titillium)', 'Titillium Web', 'sans-serif'],  
      },  
      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' },  
        },

        'pulse-glow': {  
          '0%, 100%': {  
            boxShadow: '0 0 15px rgba(var(--primary-rgb), 0.5)',  
          },  
          '50%': {  
            boxShadow: '0 0 25px rgba(var(--primary-rgb), 0.8)',  
          },  
        },  
        blink: {  
          '0%, 100%': {  
            opacity: 1,  
          },  
          '50%': {  
            opacity: 0,  
          },  
        },  
        'border-glow': {  
          '0%, 100%': {  
            borderColor: 'hsl(var(--primary))',  
          },  
          '50%': {  
            borderColor: 'hsl(var(--secondary))',  
          },  
        },  
      },  
      typography: () => ({  
        DEFAULT: {  
          css: [  
            {  
              '--tw-prose-body': 'var(--text)',  
              '--tw-prose-headings': 'var(--text)',  
              h1: {  
                fontWeight: 'normal',  
                marginBottom: '0.25em',  
              },  
            },  
          ],  
        },

        base: {  
          css: [  
            {  
              h1: {  
                fontSize: '2.5rem',  
              },  
              h2: {  
                fontSize: '1.25rem',  
                fontWeight: 600,  
              },  
            },  
          ],  
        },  
        md: {  
          css: [  
            {  
              h1: {  
                fontSize: '3.5rem',  
              },  
              h2: {  
                fontSize: '1.5rem',  
              },  
            },  
          ],  
        },  
      }),  
    },  
  },  
}  
  
export default config

Do you know how to migrate to V4

Still confused with that new

@theme

in the css

adrian87498 months ago
have you used
npx @tailwindcss/upgrade
?
elabinnovations8 months ago
That is not working. I upgraded manually
adrian87498 months ago
Why it's not?

try removing plugins for a while and upgrade

comment them out
elabinnovations8 months ago
it stuck in
Migrating templates…

i stashed all the changes and ran
npx @tailwindcss/upgrade --force
adrian87498 months ago
for tailwind v3 you need to use
https://www.npmjs.com/package/tailwindcss-scoped-preflight?ref=pkgstats.com
this plugin to scope the styles, if you want to keep it

have you removed plugins from tailwind config
elabinnovations8 months ago
no
adrian87498 months ago
try to remove/comment them out before upgrade with CLI tool

I had to do it while migrating
elabinnovations8 months ago
ok, let me try

Migrated successfully. I was running the upgrade command on a different project due to a directory mismatch.

After hours of debugging, I successfully migrated to version 4.

Thaks
@299531596036571136
adrian87498 months ago
Great news! Happy to help

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.