Files
personal-website/tailwind.config.ts
T
soconnor 4dc9d5db9b Fix theming and spacing: alpha-value colors, remove v4 CSS syntax, clean card padding
- tailwind.config.ts: add <alpha-value> to all color definitions so opacity
  modifiers (ring-foreground/10, outline-ring/50) render correctly
- globals.css: move @keyframes out of @theme inline block (v4-only, ignored
  by browser in v3); remove @custom-variant block (also v4-only)
- page.tsx, experience/page.tsx, publications/page.tsx: remove pb-3 from
  CardHeaders and pt-0 from CardContents — new shadcn card uses gap-4 so
  these overrides added extra space instead of removing it

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-11 01:27:48 -04:00

71 lines
2.5 KiB
TypeScript

import { type Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";
import typography from "@tailwindcss/typography";
import tailwindAnimate from "tailwindcss-animate";
export default {
darkMode: "class",
content: ["./src/**/*.tsx", "./src/**/*.mdx"],
theme: {
extend: {
fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans],
heading: ["var(--font-heading)", ...fontFamily.sans],
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
xl: "calc(var(--radius) + 2px)",
},
colors: {
background: "hsl(var(--background) / <alpha-value>)",
foreground: "hsl(var(--foreground) / <alpha-value>)",
card: {
DEFAULT: "hsl(var(--card) / <alpha-value>)",
foreground: "hsl(var(--card-foreground) / <alpha-value>)",
},
popover: {
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
},
primary: {
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
},
secondary: {
DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
},
muted: {
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
},
accent: {
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
},
destructive: {
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
},
border: "hsl(var(--border) / <alpha-value>)",
input: "hsl(var(--input) / <alpha-value>)",
ring: "hsl(var(--ring) / <alpha-value>)",
chart: {
"1": "hsl(var(--chart-1) / <alpha-value>)",
"2": "hsl(var(--chart-2) / <alpha-value>)",
"3": "hsl(var(--chart-3) / <alpha-value>)",
"4": "hsl(var(--chart-4) / <alpha-value>)",
"5": "hsl(var(--chart-5) / <alpha-value>)",
},
},
boxShadow: {
DEFAULT: "var(--shadow)",
// other shadows
},
},
},
plugins: [tailwindAnimate, typography],
} satisfies Config;