92 lines
2.7 KiB
JavaScript
92 lines
2.7 KiB
JavaScript
const { fontFamily } = require("tailwindcss/defaultTheme");
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: "class",
|
|
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", "*.{js,ts,jsx,tsx,mdx}"],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
background: "#0f0f1f", // fondo oscuro elegante
|
|
foreground: "#f8f8f2",
|
|
primary: {
|
|
DEFAULT: "#8b5cf6", // violeta principal
|
|
50: "#f3ebff",
|
|
100: "#e0d7ff",
|
|
200: "#c0aaff",
|
|
300: "#a078ff",
|
|
400: "#8b5cf6",
|
|
500: "#7c3aed",
|
|
600: "#6d28d9",
|
|
700: "#5b21b6",
|
|
800: "#4c1d95",
|
|
900: "#3b1070",
|
|
foreground: "#ffffff",
|
|
},
|
|
secondary: {
|
|
DEFAULT: "#c084fc", // púrpura suave para CTA
|
|
foreground: "#ffffff",
|
|
},
|
|
accent: {
|
|
DEFAULT: "#d8b4fe", // acento claro violeta
|
|
foreground: "#1f1f2e",
|
|
},
|
|
muted: {
|
|
DEFAULT: "#a78bfa", // violeta pálido
|
|
foreground: "#f8f8f2",
|
|
},
|
|
card: {
|
|
DEFAULT: "#1e1b2f", // card dark purple
|
|
foreground: "#f8f8f2",
|
|
},
|
|
popover: {
|
|
DEFAULT: "#2c2345",
|
|
foreground: "#f8f8f2",
|
|
},
|
|
success: "#7dd3fc",
|
|
warning: "#facc15",
|
|
error: "#f87171",
|
|
},
|
|
fontFamily: {
|
|
sans: ["Inter", ...fontFamily.sans],
|
|
mono: ["Fira Code", ...fontFamily.mono],
|
|
},
|
|
animation: {
|
|
"bounce-slow": "bounce 2s infinite",
|
|
"pulse-slow": "pulse 3s infinite",
|
|
"fade-in": "fadeIn 0.6s ease-in-out",
|
|
"float": "float 4s ease-in-out infinite",
|
|
"wiggle": "wiggle 0.8s ease-in-out infinite",
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
"0%": { opacity: "0", transform: "translateY(10px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
float: {
|
|
"0%, 100%": {transform: "translateY(0)"},
|
|
"50%": {transform: "translateY(-10px)"},
|
|
},
|
|
wiggle: {
|
|
"0%, 100%": {transform: "rotate(-3deg)"},
|
|
"50%": {transform: "rotate(3deg)"},
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: "1rem",
|
|
md: "0.75rem",
|
|
sm: "0.5rem",
|
|
},
|
|
boxShadow: {
|
|
"card-light": "0 8px 16px rgba(139,92,246,0.2)",
|
|
"card-dark": "0 8px 20px rgba(0,0,0,0.5)",
|
|
glow: "0 0 20px rgba(139,92,246,0.6)",
|
|
},
|
|
transitionProperty: {
|
|
height: "height",
|
|
spacing: "margin, padding",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}; |