Tailwind

Our blocks have been upgraded to Tailwind 4 and tested with the latest version of shadcn/ui.

Tailwind 4 CSS

This is the Tailwind 4 config we use for our blocks.

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@plugin "@tailwindcss/typography";
@plugin "tailwindcss-animate";

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(0 0% 3.9%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(0 0% 3.9%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(0 0% 3.9%);
  --primary: hsl(0 0% 9%);
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(0 0% 96%);
  --secondary-foreground: hsl(0 0% 9%);
  --muted: hsl(0 0% 96%);
  --muted-foreground: hsl(0 0% 45.1%);
  --accent: hsl(0 0% 96%);
  --accent-foreground: hsl(0 0% 9%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(0, 0%, 90%);
  --input: hsl(0 0% 89.8%);
  --ring: hsl(0 0% 3.9%);
  --radius: 8px;

  --chart-1: hsl(12 76% 61%);
  --chart-2: hsl(173 58% 39%);
  --chart-3: hsl(197 37% 24%);
  --chart-4: hsl(43 74% 66%);
  --chart-5: hsl(27 87% 67%);

  --sidebar: hsl(0 0% 98%);
  --sidebar-foreground: hsl(240 5.3% 26.1%);
  --sidebar-primary: hsl(240 5.9% 10%);
  --sidebar-primary-foreground: hsl(0 0% 98%);
  --sidebar-accent: hsl(240 4.8% 95.9%);
  --sidebar-accent-foreground: hsl(240 5.9% 10%);
  --sidebar-border: hsl(220 13% 91%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);

  /* Shadcnblocks.com */
  --muted-2: hsl(0 0% 90%);
  --muted-2-foreground: hsl(240 3.8% 46.1%);
}
.dark {
  --background: hsl(240 10% 3.9%);
  --foreground: hsl(0 0% 98%);
  --card: hsl(240 10% 3.9%);
  --card-foreground: hsl(0 0% 98%);
  --popover: hsl(240 10% 3.9%);
  --popover-foreground: hsl(0 0% 98%);
  --primary: hsl(0 0% 98%);
  --primary-foreground: hsl(240 5.9% 10%);
  --secondary: hsl(240 3.7% 15.9%);
  --secondary-foreground: hsl(0 0% 98%);
  --muted: hsl(240 3.7% 15.9%);
  --muted-foreground: hsl(240 5% 64.9%);
  --accent: hsl(240 3.7% 15.9%);
  --accent-foreground: hsl(0 0% 98%);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(240 3.7% 15.9%);
  --input: hsl(240 3.7% 15.9%);
  --ring: hsl(240 4.9% 83.9%);

  --chart-1: hsl(220 70% 50%);
  --chart-2: hsl(160 60% 45%);
  --chart-3: hsl(30 80% 55%);
  --chart-4: hsl(280 65% 60%);
  --chart-5: hsl(340 75% 55%);

  --sidebar: hsl(240 5.9% 10%);
  --sidebar-foreground: hsl(240 4.8% 95.9%);
  --sidebar-primary: hsl(224.3 76.3% 48%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(240 3.7% 15.9%);
  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
  --sidebar-border: hsl(240 3.7% 15.9%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);

  /* Shadcnblocks.com */
  --muted-2: hsl(0, 0%, 18%);
  --muted-2-foreground: hsl(240, 2%, 75%);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  /* Shadcnblocks.com */
  --color-muted-2: var(--muted-2);
  --color-muted-2-foreground: var(--muted-2-foreground);
  --color-transparent: transparent;

  --radius-xs: calc(var(--radius) - 4px);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1400px; /* default is 1536px */

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-fade-in-out: fade-in-out 4s ease-in-out;
  --animate-progress: progress 8s linear;
  --animate-infinite-slider: infiniteSlider 20s linear infinite;
  --animate-infinite-slider-reverse: infiniteSliderReverse 20s linear infinite;
  --animate-shadow-ping: shadow-ping 1.5s ease-in-out infinite;
  --animate-flip-btn: flip-btn 6s infinite steps(2, end);
  --animate-rotate-btn: rotate-btn 3s linear infinite both;
  --animate-light-to-right-top: light-to-right 4s linear infinite;
  --animate-light-to-right-bottom: light-to-right 4s linear infinite;
  --animate-marquee: marquee 25s linear infinite;
  --animate-slide-to-right: slide-to-right 3s linear infinite;
  --animate-slide-to-top: slide-to-top 3s linear infinite;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }

  @keyframes fade-in-out {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes progress {
    from {
      width: "0%";
    }
    to {
      width: "100%";
    }
  }

  @keyframes infiniteSlider {
    0% {
      transform: "translateX(0)";
    }
    100% {
      transform: "translateX(calc(-250px * 5))";
    }
  }

  @keyframes infiniteSliderReverse {
    0% {
      transform: "translateX(calc(-250px * 5))";
    }
    100% {
      transform: "translateX(0)";
    }
  }

  @keyframes fade-in-scale {
    0% {
      opacity: 0;
      transform: scale(0.95);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes transform1 {
    0%,
    25%,
    100% {
      width: 100%;
      padding-bottom: 120%;
    }
    33.33%,
    58.33% {
      width: 0%;
      padding-bottom: 0%;
    }
    66.66%,
    91.66% {
      width: 90%;
      padding-bottom: 100%;
    }
  }

  @keyframes transform2 {
    0%,
    25%,
    100% {
      width: 65%;
      padding-bottom: 65%;
    }
    33.33%,
    58.33% {
      width: 95%;
      padding-bottom: 114%;
    }
    66.66%,
    91.66% {
      width: 52%;
      padding-bottom: 52%;
    }
  }

  @keyframes transform3 {
    0%,
    25%,
    100% {
      width: 78%;
      padding-bottom: 100%;
    }
    33.33%,
    58.33% {
      width: 78%;
      padding-bottom: 94%;
    }
    66.66%,
    91.66% {
      width: 95%;
      padding-bottom: 76%;
    }
  }

  @keyframes transform4 {
    0%,
    25%,
    66.66%,
    91.66%,
    100% {
      width: 0%;
      padding-bottom: 0%;
    }
    33.33%,
    58.33% {
      width: 65%;
      padding-bottom: 46%;
    }
  }

  @keyframes image1 {
    0%,
    25%,
    100% {
      opacity: 1;
    }
    33.33%,
    58.33%,
    66.66%,
    91.66% {
      opacity: 0;
    }
  }

  @keyframes image2 {
    0%,
    25%,
    33.33%,
    58.33%,
    100% {
      opacity: 0;
    }
    66.66%,
    91.66% {
      opacity: 1;
    }
  }

  @keyframes image3 {
    0%,
    25%,
    66.66%,
    91.66%,
    100% {
      opacity: 0;
    }
    33.33%,
    58.33% {
      opacity: 1;
    }
  }

  @keyframes gradient-spin {
    0% {
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    100% {
      transform: translateX(-50%) translateY(-50%) rotate(360deg);
    }
  }

  @keyframes shadow-ping {
    0% {
      boxshadow: 0 0 0 0px theme("colors.neutral.100");
    }
    50% {
      boxshadow: 0 0 0 12px theme("colors.neutral.300");
    }
    100% {
      boxshadow: 0 0 0 12px transparent;
    }
  }

  @keyframes show-text {
    0%,
    14.28% {
      opacity: 0;
    }
    17%,
    26% {
      opacity: 1;
    }
    28.58%,
    100% {
      opacity: 0;
    }
  }

  @keyframes flip-btn {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes rotate-btn {
    to {
      transform: rotate(90deg);
    }
  }

  @keyframes slide-to-right {
    0% {
      opacity: 0;
      left: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 80%;
    }
  }

  @keyframes slide-to-top {
    0% {
      opacity: 0;
      bottom: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      bottom: 80%;
    }
  }

  @keyframes light-to-right {
    0% {
      transform: translate(0%);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(100%);
      opacity: 0;
    }
  }

  @keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
}

@layer components {
  button {
    cursor: pointer;
  }
  [class*="border"] {
    @apply border-border;
  }
  p {
    @apply text-muted-foreground;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Tailwind 3 Config

This is the Tailwind 3 config we use for our blocks.

import type { Config } from 'tailwindcss'

const config: Config = {
  darkMode: ["class"],
  content: [
    "./code/block/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
  ],
  theme: {
    container: {
      center: 'true',
      padding: '2rem',
      screens: {
        '2xl': '1400px'
      }
    },
    extend: {
      fontFamily: {
        sans: ["Inter Variable", "Inter", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"],
        mono: ["Source Code Pro", "SFMono-Regular", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"]
      },
      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))'
        },
        chart: {
          '1': 'hsl(var(--chart-1))',
          '2': 'hsl(var(--chart-2))',
          '3': 'hsl(var(--chart-3))',
          '4': 'hsl(var(--chart-4))',
          '5': 'hsl(var(--chart-5))'
        },
        sidebar: {
          DEFAULT: 'hsl(var(--sidebar-background))',
          foreground: 'hsl(var(--sidebar-foreground))',
          primary: 'hsl(var(--sidebar-primary))',
          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
          accent: 'hsl(var(--sidebar-accent))',
          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
          border: 'hsl(var(--sidebar-border))',
          ring: 'hsl(var(--sidebar-ring))'
        },
      "muted-60": {
        DEFAULT: 'hsla(var(--muted-60))'
      },
      muted2: {
        DEFAULT: 'hsl(var(--muted2))',
        foreground: 'hsl(var(--muted2-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'
          }
        },
        'fade-in-out': {
          '0%': {
            opacity: '0'
          },
          '20%': {
            opacity: '1'
          },
          '80%': {
            opacity: '1'
          },
          '100%': {
            opacity: '0'
          }
        },
        progress: {
          from: {
            width: '0%'
          },
          to: {
            width: '100%'
          }
        }
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
        'fade-in-out': 'fade-in-out 4s ease-in-out',
        progress: 'progress 8s linear'
      }
    }
  },
  plugins: [
      require('tailwindcss-animate'),
      require('@tailwindcss/typography'),
  ],
} satisfies Config;

export default config;