Tailwind CSS color config defaults for Border, Ring, and Ring Offset

[jeremy-code]

In Tailwind CSS, the default border color is set to theme('colors.gray.200', 'currentColor') and the default ring color is set to theme('colors.blue.500', '#3b82f6'). Per the docs, Border Color, Ring Color, and Ring Offset Color can be modified in the Tailwind CSS config file.

Currently, shadcn/ui creates new colors in the config for border and ring. border-border is manually applied in globals.css to *. Also, everytime ring is used, it must be accompanied by class ring-ring; ring-offset requires ring-offset-background.

However, by setting these as the defaults, it will overwrite the Tailwind CSS defaults with the correct variables and prevent the above code repetition.

Here's an example of what it may look lake in the tailwind.config.js.

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  theme: {
    extend: {
      borderColor: { DEFAULT: "hsl(var(--border))" },
      colors: {
        input: "hsl(var(--input))",
        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))",
        },
      },
      ringColor: { DEFAULT: "hsl(var(--ring))" },
      ringOffsetColor: { DEFAULT: "hsl(var(--background))" },
      // ...
    },
  },
}

What do you think? Note that ring offset color does not typically have a DEFAULT which may have some unexpected behavior.