133 lines
3.2 KiB
TypeScript
Executable File
133 lines
3.2 KiB
TypeScript
Executable File
import type { Config } from "tailwindcss";
|
|
|
|
export const NiceTailwindConfig: Config = {
|
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// 主色调 - 优雅蓝（清新雅致）
|
|
primary: {
|
|
50: "#f0f7ff",
|
|
100: "#e0f0ff",
|
|
150: "#cce7ff",
|
|
200: "#b3ddff",
|
|
250: "#99d3ff",
|
|
300: "#66bfff",
|
|
350: "#47b3ff",
|
|
400: "#1ca6ff",
|
|
500: "#0088E8", // 主色调
|
|
600: "#0070cc",
|
|
700: "#0058a3",
|
|
800: "#004080",
|
|
900: "#002847",
|
|
DEFAULT: "#0088E8",
|
|
},
|
|
// 辅助色 - 温和灰（内容展示）
|
|
secondary: {
|
|
50: "#fafafa",
|
|
100: "#f5f5f5",
|
|
200: "#eeeeee",
|
|
300: "#e0e0e0",
|
|
350: "#d4d4d4",
|
|
400: "#bdbdbd",
|
|
500: "#9e9e9e",
|
|
600: "#757575",
|
|
700: "#616161",
|
|
800: "#424242",
|
|
900: "#212121",
|
|
DEFAULT: "#757575",
|
|
},
|
|
// 强调色 - 活力橙（重要操作、交互）
|
|
accent: {
|
|
50: "#fff4e5",
|
|
100: "#ffe8cc",
|
|
200: "#ffd699",
|
|
300: "#ffc466",
|
|
400: "#ffb333",
|
|
500: "#ffa200",
|
|
600: "#cc8200",
|
|
700: "#996100",
|
|
800: "#664100",
|
|
900: "#332000",
|
|
DEFAULT: "#ffa200",
|
|
},
|
|
// 功能色（协调搭配）
|
|
success: "#4caf50",
|
|
warning: "#ff9800",
|
|
danger: "#f44336",
|
|
info: "#03a9f4",
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
"PingFang SC",
|
|
"Microsoft YaHei",
|
|
"Helvetica Neue",
|
|
"system-ui",
|
|
"sans-serif",
|
|
],
|
|
heading: [
|
|
"PingFang SC",
|
|
"Microsoft YaHei",
|
|
"Helvetica Neue",
|
|
"sans-serif",
|
|
],
|
|
mono: ["Source Code Pro", "monospace"],
|
|
},
|
|
spacing: {
|
|
"72": "18rem",
|
|
"84": "21rem",
|
|
"96": "24rem",
|
|
},
|
|
borderRadius: {
|
|
xl: "1rem",
|
|
"2xl": "2rem",
|
|
"3xl": "3rem",
|
|
},
|
|
boxShadow: {
|
|
outline: "0 0 0 3px rgba(0, 136, 232, 0.4)",
|
|
solid: "2px 2px 0 0 rgba(0, 0, 0, 0.1)",
|
|
glow: "0 0 8px rgba(0, 136, 232, 0.4)",
|
|
inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)",
|
|
"elevation-1": "0 1px 2px rgba(0, 0, 0, 0.05)",
|
|
"elevation-2": "0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
"elevation-3": "0 4px 8px rgba(0, 0, 0, 0.1)",
|
|
"elevation-4": "0 8px 16px rgba(0, 0, 0, 0.1)",
|
|
"elevation-5": "0 16px 32px rgba(0, 0, 0, 0.1)",
|
|
panel: "0 2px 4px rgba(0, 0, 0, 0.05)",
|
|
button: "0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
card: "0 2px 8px rgba(0, 0, 0, 0.08)",
|
|
modal: "0 4px 16px rgba(0, 0, 0, 0.1)",
|
|
"video-thumbnail": "0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
"hover-card": "0 4px 8px rgba(0, 0, 0, 0.08)",
|
|
"player-controls": "0 -2px 8px rgba(0, 0, 0, 0.1)",
|
|
"floating-player": "0 4px 12px rgba(0, 0, 0, 0.1)",
|
|
},
|
|
animation: {
|
|
"pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
|
|
"spin-slow": "spin 3s linear infinite",
|
|
"fade-in": "fadeIn 0.3s ease-in-out",
|
|
"slide-up": "slideUp 0.4s ease-out",
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
"0%": { opacity: "0" },
|
|
"100%": { opacity: "1" },
|
|
},
|
|
slideUp: {
|
|
"0%": { transform: "translateY(10px)", opacity: "0" },
|
|
"100%": { transform: "translateY(0)", opacity: "1" },
|
|
},
|
|
},
|
|
transitionDuration: {
|
|
"2000": "2000ms",
|
|
"3000": "3000ms",
|
|
},
|
|
screens: {
|
|
"3xl": "1920px",
|
|
"4xl": "2560px",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|