166 lines
4.3 KiB
JavaScript
166 lines
4.3 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
gray: {
|
|
50: '#fafafa',
|
|
100: '#f4f4f5',
|
|
200: '#e4e4e7', // border-light
|
|
300: '#d4d4d8',
|
|
400: '#a1a1aa', // text-secondary
|
|
500: '#71717a',
|
|
600: '#52525b', // border-dark
|
|
700: '#3f3f46',
|
|
800: '#27272a', // bg-secondary
|
|
900: '#18181b', // bg-primary
|
|
950: '#09090b', // bg-deep
|
|
},
|
|
primary: {
|
|
50: '#eff6ff',
|
|
100: '#dbeafe',
|
|
200: '#bfdbfe',
|
|
300: '#93c5fd',
|
|
400: '#60a5fa',
|
|
500: '#3b82f6', // accent
|
|
600: '#2563eb', // accent-hover
|
|
700: '#1d4ed8',
|
|
800: '#1e40af',
|
|
900: '#1e3a8a',
|
|
950: '#172554',
|
|
},
|
|
d: {
|
|
50: '#fef2f2',
|
|
100: '#fee2e2',
|
|
200: '#fecaca',
|
|
300: '#fca5a5',
|
|
400: '#f87171',
|
|
500: '#ef4444',
|
|
600: '#dc2626',
|
|
700: '#b91c1c',
|
|
800: '#991b1b',
|
|
900: '#7f1d1d',
|
|
950: '#450a0a',
|
|
},
|
|
s: {
|
|
50: '#f0fdf4',
|
|
100: '#dcfce7',
|
|
200: '#bbf7d0',
|
|
300: '#86efac',
|
|
400: '#4ade80',
|
|
500: '#22c55e',
|
|
600: '#16a34a',
|
|
700: '#15803d',
|
|
800: '#166534',
|
|
900: '#14532d',
|
|
950: '#052e16',
|
|
}
|
|
},
|
|
boxShadow: {
|
|
'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
|
|
'glass': '0 8px 32px 0 rgba(0, 0, 0, 0.08)',
|
|
'glow': '0 0 15px rgba(59, 130, 246, 0.5)',
|
|
},
|
|
|
|
fontFamily: {
|
|
sans: [
|
|
'Inter',
|
|
'ui-sans-serif',
|
|
'system-ui',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'"Helvetica Neue"',
|
|
'Arial',
|
|
'"Noto Sans"',
|
|
'sans-serif',
|
|
'"Apple Color Emoji"',
|
|
'"Segoe UI Emoji"',
|
|
'"Segoe UI Symbol"',
|
|
'"Noto Color Emoji"'
|
|
],
|
|
mono: [
|
|
'ui-monospace',
|
|
'SFMono-Regular',
|
|
'Menlo',
|
|
'Monaco',
|
|
'Consolas',
|
|
'"Liberation Mono"',
|
|
'"Courier New"',
|
|
'monospace'
|
|
],
|
|
},
|
|
typography: (theme) => ({
|
|
DEFAULT: {
|
|
css: {
|
|
maxWidth: 'none',
|
|
color: theme('colors.gray.700'),
|
|
a: {
|
|
color: theme('colors.primary.600'),
|
|
'&:hover': {
|
|
color: theme('colors.primary.500'),
|
|
},
|
|
},
|
|
h1: {
|
|
color: theme('colors.gray.900'),
|
|
letterSpacing: '-0.025em',
|
|
},
|
|
h2: {
|
|
color: theme('colors.gray.900'),
|
|
letterSpacing: '-0.025em',
|
|
},
|
|
h3: {
|
|
color: theme('colors.gray.900'),
|
|
},
|
|
h4: {
|
|
color: theme('colors.gray.900'),
|
|
},
|
|
code: {
|
|
color: theme('colors.primary.600'),
|
|
backgroundColor: theme('colors.gray.100'),
|
|
borderRadius: '0.25rem',
|
|
paddingLeft: '0.25rem',
|
|
paddingRight: '0.25rem',
|
|
},
|
|
},
|
|
},
|
|
dark: {
|
|
css: {
|
|
color: theme('colors.gray.300'),
|
|
a: {
|
|
color: theme('colors.primary.400'),
|
|
'&:hover': {
|
|
color: theme('colors.primary.300'),
|
|
},
|
|
},
|
|
h1: {
|
|
color: theme('colors.gray.50'),
|
|
},
|
|
h2: {
|
|
color: theme('colors.gray.50'),
|
|
},
|
|
h3: {
|
|
color: theme('colors.gray.100'),
|
|
},
|
|
h4: {
|
|
color: theme('colors.gray.100'),
|
|
},
|
|
code: {
|
|
color: theme('colors.primary.300'),
|
|
backgroundColor: theme('colors.gray.800'),
|
|
},
|
|
pre: {
|
|
backgroundColor: theme('colors.gray.900'),
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/typography'),
|
|
],
|
|
} |