wehub-resource-sync
82 lines
2.8 KiB
JavaScript
82 lines
2.8 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
|
darkMode: ["class", '[data-mantine-color-scheme="dark"]'],
|
|
theme: {
|
|
extend: {
|
|
// Use standard Tailwind color system with CSS variables for theme switching
|
|
colors: {
|
|
// Override gray to work with both themes
|
|
gray: {
|
|
50: "rgb(var(--gray-50) / <alpha-value>)",
|
|
100: "rgb(var(--gray-100) / <alpha-value>)",
|
|
200: "rgb(var(--gray-200) / <alpha-value>)",
|
|
300: "rgb(var(--gray-300) / <alpha-value>)",
|
|
400: "rgb(var(--gray-400) / <alpha-value>)",
|
|
500: "rgb(var(--gray-500) / <alpha-value>)",
|
|
600: "rgb(var(--gray-600) / <alpha-value>)",
|
|
700: "rgb(var(--gray-700) / <alpha-value>)",
|
|
800: "rgb(var(--gray-800) / <alpha-value>)",
|
|
900: "rgb(var(--gray-900) / <alpha-value>)",
|
|
},
|
|
green: {
|
|
50: "var(--color-green-50)",
|
|
100: "var(--color-green-100)",
|
|
200: "var(--color-green-200)",
|
|
300: "var(--color-green-300)",
|
|
400: "var(--color-green-400)",
|
|
500: "var(--color-green-500)",
|
|
600: "var(--color-green-600)",
|
|
700: "var(--color-green-700)",
|
|
800: "var(--color-green-800)",
|
|
900: "var(--color-green-900)",
|
|
},
|
|
yellow: {
|
|
50: "var(--color-yellow-50)",
|
|
100: "var(--color-yellow-100)",
|
|
200: "var(--color-yellow-200)",
|
|
300: "var(--color-yellow-300)",
|
|
400: "var(--color-yellow-400)",
|
|
500: "var(--color-yellow-500)",
|
|
600: "var(--color-yellow-600)",
|
|
700: "var(--color-yellow-700)",
|
|
800: "var(--color-yellow-800)",
|
|
900: "var(--color-yellow-900)",
|
|
},
|
|
red: {
|
|
50: "var(--color-red-50)",
|
|
100: "var(--color-red-100)",
|
|
200: "var(--color-red-200)",
|
|
300: "var(--color-red-300)",
|
|
400: "var(--color-red-400)",
|
|
500: "var(--color-red-500)",
|
|
600: "var(--color-red-600)",
|
|
700: "var(--color-red-700)",
|
|
800: "var(--color-red-800)",
|
|
900: "var(--color-red-900)",
|
|
},
|
|
// Custom semantic colors for app-specific usage
|
|
surface: "rgb(var(--surface) / <alpha-value>)",
|
|
background: "rgb(var(--background) / <alpha-value>)",
|
|
border: "rgb(var(--border) / <alpha-value>)",
|
|
},
|
|
|
|
// Z-index scale
|
|
zIndex: {
|
|
dropdown: "1000",
|
|
sticky: "1020",
|
|
fixed: "1030",
|
|
"modal-backdrop": "1040",
|
|
modal: "1050",
|
|
popover: "1060",
|
|
tooltip: "1070",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
// Enable preflight for standard Tailwind functionality
|
|
corePlugins: {
|
|
preflight: true,
|
|
},
|
|
};
|