126 lines
3.9 KiB
JavaScript
126 lines
3.9 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
darkMode: "class",
|
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
|
theme: {
|
|
extend: {
|
|
screens: {
|
|
xs: "475px",
|
|
sm: "640px",
|
|
md: "768px",
|
|
lg: "1024px",
|
|
xl: "1280px",
|
|
"2xl": "1536px",
|
|
"3xl": "1920px",
|
|
},
|
|
fontSize: {
|
|
xs: ["0.75rem", { lineHeight: "1rem" }],
|
|
sm: ["0.875rem", { lineHeight: "1.25rem" }],
|
|
base: ["1rem", { lineHeight: "1.5rem" }],
|
|
lg: ["1.125rem", { lineHeight: "1.75rem" }],
|
|
xl: ["1.25rem", { lineHeight: "1.75rem" }],
|
|
"2xl": ["1.5rem", { lineHeight: "2rem" }],
|
|
"3xl": ["1.875rem", { lineHeight: "2.25rem" }],
|
|
"4xl": ["2.25rem", { lineHeight: "2.5rem" }],
|
|
"5xl": ["3rem", { lineHeight: "1" }],
|
|
},
|
|
spacing: {
|
|
xs: "0.25rem", // 4px
|
|
sm: "0.5rem", // 8px
|
|
md: "1rem", // 16px
|
|
lg: "1.5rem", // 24px
|
|
xl: "2rem", // 32px
|
|
"2xl": "3rem", // 48px
|
|
"3xl": "4rem", // 64px
|
|
"4xl": "6rem", // 96px
|
|
},
|
|
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))",
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: "var(--radius)",
|
|
md: "calc(var(--radius) - 2px)",
|
|
sm: "calc(var(--radius) - 4px)",
|
|
},
|
|
transitionDuration: {
|
|
2000: "2000ms",
|
|
},
|
|
animation: {
|
|
bounce: "bounce 1s infinite",
|
|
"spin-slow": "spin 2s linear infinite",
|
|
"spin-once": "spinOnce 0.6s ease-out forwards",
|
|
"scale-in": "scaleIn 0.3s ease-out",
|
|
"fade-in": "fadeIn 0.3s ease-out",
|
|
"pulse-ring": "pulseRing 1.5s ease-out infinite",
|
|
shimmer: "shimmer 2s linear infinite",
|
|
pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
|
|
},
|
|
keyframes: {
|
|
spinOnce: {
|
|
"0%": { transform: "rotate(0deg) scale(0)", opacity: "0" },
|
|
"50%": { transform: "rotate(180deg) scale(1)", opacity: "1" },
|
|
"100%": { transform: "rotate(360deg) scale(1)", opacity: "1" },
|
|
},
|
|
scaleIn: {
|
|
"0%": { transform: "scale(0.8)", opacity: "0" },
|
|
"100%": { transform: "scale(1)", opacity: "1" },
|
|
},
|
|
fadeIn: {
|
|
"0%": { opacity: "0" },
|
|
"100%": { opacity: "1" },
|
|
},
|
|
pulseRing: {
|
|
"0%": { transform: "scale(0.8)", opacity: "0.8" },
|
|
"50%": { transform: "scale(1.2)", opacity: "0.4" },
|
|
"100%": { transform: "scale(1.5)", opacity: "0" },
|
|
},
|
|
shimmer: {
|
|
"0%": { backgroundPosition: "-1000px 0" },
|
|
"100%": { backgroundPosition: "1000px 0" },
|
|
},
|
|
pulse: {
|
|
"0%, 100%": { opacity: "1" },
|
|
"50%": { opacity: "0.5" },
|
|
},
|
|
},
|
|
animationDelay: {
|
|
100: "100ms",
|
|
200: "200ms",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|