zyros
Version:
A developer-friendly static site generator built with Next.js and Tailwind CSS. Transform a simple JSON file into a beautiful, fast static website.
951 lines (932 loc) • 32.2 kB
JavaScript
/** @type {import('tailwindcss').Config} */
const config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./lib/**/*.{js,ts,jsx,tsx,mdx}',
'./styles/**/*.{js,ts,jsx,tsx,mdx}',
],
darkMode: 'class',
theme: {
extend: {
// Modern font stack with variable fonts
fontFamily: {
sans: [
'Inter',
'Geist',
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
'sans-serif'
],
mono: [
'JetBrains Mono',
'SF Mono',
'Monaco',
'Cascadia Code',
'Roboto Mono',
'Consolas',
'Courier New',
'monospace'
],
display: [
'Inter',
'Geist',
'system-ui',
'sans-serif'
]
},
// Enhanced spacing scale
spacing: {
'0.5': '0.125rem',
'1.5': '0.375rem',
'2.5': '0.625rem',
'3.5': '0.875rem',
'4.5': '1.125rem',
'5.5': '1.375rem',
'6.5': '1.625rem',
'7.5': '1.875rem',
'8.5': '2.125rem',
'9.5': '2.375rem',
'15': '3.75rem',
'17': '4.25rem',
'18': '4.5rem',
'19': '4.75rem',
'21': '5.25rem',
'22': '5.5rem',
'23': '5.75rem',
'25': '6.25rem',
'26': '6.5rem',
'27': '6.75rem',
'29': '7.25rem',
'30': '7.5rem',
'31': '7.75rem',
'33': '8.25rem',
'34': '8.5rem',
'35': '8.75rem',
'37': '9.25rem',
'38': '9.5rem',
'39': '9.75rem',
'41': '10.25rem',
'42': '10.5rem',
'43': '10.75rem',
'45': '11.25rem',
'46': '11.5rem',
'47': '11.75rem',
'49': '12.25rem',
'50': '12.5rem',
'51': '12.75rem',
'53': '13.25rem',
'54': '13.5rem',
'55': '13.75rem',
'57': '14.25rem',
'58': '14.5rem',
'59': '14.75rem',
'61': '15.25rem',
'62': '15.5rem',
'63': '15.75rem',
'65': '16.25rem',
'66': '16.5rem',
'67': '16.75rem',
'68': '17rem',
'69': '17.25rem',
'70': '17.5rem',
'71': '17.75rem',
'73': '18.25rem',
'74': '18.5rem',
'75': '18.75rem',
'76': '19rem',
'77': '19.25rem',
'78': '19.5rem',
'79': '19.75rem',
'81': '20.25rem',
'82': '20.5rem',
'83': '20.75rem',
'84': '21rem',
'85': '21.25rem',
'86': '21.5rem',
'87': '21.75rem',
'88': '22rem',
'89': '22.25rem',
'90': '22.5rem',
'91': '22.75rem',
'92': '23rem',
'93': '23.25rem',
'94': '23.5rem',
'95': '23.75rem',
'97': '24.25rem',
'98': '24.5rem',
'99': '24.75rem',
'100': '25rem',
'104': '26rem',
'108': '27rem',
'112': '28rem',
'116': '29rem',
'120': '30rem',
'124': '31rem',
'128': '32rem',
'132': '33rem',
'136': '34rem',
'140': '35rem',
'144': '36rem',
'148': '37rem',
'152': '38rem',
'156': '39rem',
'160': '40rem',
'164': '41rem',
'168': '42rem',
'172': '43rem',
'176': '44rem',
'180': '45rem',
'184': '46rem',
'188': '47rem',
'192': '48rem',
'196': '49rem',
'200': '50rem',
},
// Enhanced border radius scale
borderRadius: {
'none': '0',
'sm': '0.125rem',
'DEFAULT': '0.25rem',
'md': '0.375rem',
'lg': '0.5rem',
'xl': '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
'4xl': '2rem',
'5xl': '2.5rem',
'full': '9999px',
},
// Enhanced typography scale
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' }],
'6xl': ['3.75rem', { lineHeight: '1' }],
'7xl': ['4.5rem', { lineHeight: '1' }],
'8xl': ['6rem', { lineHeight: '1' }],
'9xl': ['8rem', { lineHeight: '1' }],
// Fluid typography
'fluid-xs': 'clamp(0.75rem, 0.9vw, 0.875rem)',
'fluid-sm': 'clamp(0.875rem, 1vw, 1rem)',
'fluid-base': 'clamp(1rem, 1.2vw, 1.125rem)',
'fluid-lg': 'clamp(1.125rem, 1.4vw, 1.25rem)',
'fluid-xl': 'clamp(1.25rem, 1.6vw, 1.5rem)',
'fluid-2xl': 'clamp(1.5rem, 2vw, 1.875rem)',
'fluid-3xl': 'clamp(1.875rem, 2.5vw, 2.25rem)',
'fluid-4xl': 'clamp(2.25rem, 3vw, 3rem)',
'fluid-5xl': 'clamp(3rem, 4vw, 3.75rem)',
'fluid-6xl': 'clamp(3.75rem, 5vw, 4.5rem)',
'fluid-7xl': 'clamp(4.5rem, 6vw, 6rem)',
'fluid-8xl': 'clamp(6rem, 8vw, 8rem)',
'fluid-9xl': 'clamp(8rem, 10vw, 12rem)',
},
// Enhanced line height scale
lineHeight: {
'none': '1',
'tight': '1.25',
'snug': '1.375',
'normal': '1.5',
'relaxed': '1.625',
'loose': '2',
'3': '.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'7': '1.75rem',
'8': '2rem',
'9': '2.25rem',
'10': '2.5rem',
},
// Enhanced letter spacing
letterSpacing: {
'tighter': '-0.05em',
'tight': '-0.025em',
'normal': '0em',
'wide': '0.025em',
'wider': '0.05em',
'widest': '0.1em',
},
// Enhanced animation system
animation: {
'none': 'none',
'spin': 'spin 1s linear infinite',
'ping': 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
'pulse': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'bounce': 'bounce 1s infinite',
// Custom animations
'fade-in': 'fadeIn 0.5s ease-in-out',
'fade-in-up': 'fadeInUp 0.6s ease-out',
'fade-in-down': 'fadeInDown 0.6s ease-out',
'fade-in-left': 'fadeInLeft 0.6s ease-out',
'fade-in-right': 'fadeInRight 0.6s ease-out',
'slide-in-left': 'slideInLeft 0.5s ease-out',
'slide-in-right': 'slideInRight 0.5s ease-out',
'slide-in-up': 'slideInUp 0.5s ease-out',
'slide-in-down': 'slideInDown 0.5s ease-out',
'bounce-gentle': 'bounceGentle 2s infinite',
'pulse-slow': 'pulse 3s infinite',
'gradient': 'gradient 6s ease infinite',
'shimmer': 'shimmer 2s infinite',
'float': 'float 3s ease-in-out infinite',
'glow': 'glow 2s infinite',
'spin-slow': 'spin-slow 3s linear infinite',
'scale': 'scale 2s infinite',
'wiggle': 'wiggle 1s ease-in-out infinite',
'heartbeat': 'heartbeat 1.5s ease-in-out infinite',
'rubber-band': 'rubberBand 1s ease-in-out',
'shake': 'shake 0.82s cubic-bezier(.36,.07,.19,.97) both',
'swing': 'swing 1s ease-in-out',
'tada': 'tada 1s ease-in-out',
'wobble': 'wobble 1s ease-in-out',
'jello': 'jello 1s ease-in-out',
'flash': 'flash 1s ease-in-out',
'flip': 'flip 1s ease-in-out',
'light-speed-in': 'lightSpeedIn 1s ease-out',
'light-speed-out': 'lightSpeedOut 1s ease-in',
'roll-in': 'rollIn 1s ease-out',
'roll-out': 'rollOut 1s ease-in',
'zoom-in': 'zoomIn 0.6s ease-out',
'zoom-out': 'zoomOut 0.6s ease-in',
},
// Enhanced keyframes
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
fadeInUp: {
'0%': { opacity: '0', transform: 'translateY(2rem)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
fadeInDown: {
'0%': { opacity: '0', transform: 'translateY(-2rem)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
fadeInLeft: {
'0%': { opacity: '0', transform: 'translateX(-2rem)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
fadeInRight: {
'0%': { opacity: '0', transform: 'translateX(2rem)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
slideInLeft: {
'0%': { opacity: '0', transform: 'translateX(-2rem)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
slideInRight: {
'0%': { opacity: '0', transform: 'translateX(2rem)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
slideInUp: {
'0%': { opacity: '0', transform: 'translateY(2rem)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
slideInDown: {
'0%': { opacity: '0', transform: 'translateY(-2rem)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
bounceGentle: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-0.5rem)' },
},
gradient: {
'0%, 100%': { backgroundPosition: '0% 50%' },
'50%': { backgroundPosition: '100% 50%' },
},
shimmer: {
'0%': { backgroundPosition: '-200% 0' },
'100%': { backgroundPosition: '200% 0' },
},
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-0.5rem)' },
},
glow: {
'0%, 100%': { boxShadow: '0 0 5px rgba(59, 130, 246, 0.5)' },
'50%': { boxShadow: '0 0 20px rgba(59, 130, 246, 0.8)' },
},
'spin-slow': {
from: { transform: 'rotate(0deg)' },
to: { transform: 'rotate(360deg)' },
},
scale: {
'0%, 100%': { transform: 'scale(1)' },
'50%': { transform: 'scale(1.05)' },
},
wiggle: {
'0%, 100%': { transform: 'rotate(-3deg)' },
'50%': { transform: 'rotate(3deg)' },
},
heartbeat: {
'0%': { transform: 'scale(1)' },
'14%': { transform: 'scale(1.3)' },
'28%': { transform: 'scale(1)' },
'42%': { transform: 'scale(1.3)' },
'70%': { transform: 'scale(1)' },
},
rubberBand: {
'0%': { transform: 'scale3d(1, 1, 1)' },
'30%': { transform: 'scale3d(1.25, 0.75, 1)' },
'40%': { transform: 'scale3d(0.75, 1.25, 1)' },
'50%': { transform: 'scale3d(1.15, 0.85, 1)' },
'65%': { transform: 'scale3d(0.95, 1.05, 1)' },
'75%': { transform: 'scale3d(1.05, 0.95, 1)' },
'100%': { transform: 'scale3d(1, 1, 1)' },
},
shake: {
'10%, 90%': { transform: 'translate3d(-1px, 0, 0)' },
'20%, 80%': { transform: 'translate3d(2px, 0, 0)' },
'30%, 50%, 70%': { transform: 'translate3d(-4px, 0, 0)' },
'40%, 60%': { transform: 'translate3d(4px, 0, 0)' },
},
swing: {
'20%': { transform: 'rotate3d(0, 0, 1, 15deg)' },
'40%': { transform: 'rotate3d(0, 0, 1, -10deg)' },
'60%': { transform: 'rotate3d(0, 0, 1, 5deg)' },
'80%': { transform: 'rotate3d(0, 0, 1, -5deg)' },
'100%': { transform: 'rotate3d(0, 0, 1, 0deg)' },
},
tada: {
'0%': { transform: 'scale3d(1, 1, 1)' },
'10%, 20%': { transform: 'scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)' },
'30%, 50%, 70%, 90%': { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' },
'40%, 60%, 80%': { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)' },
'100%': { transform: 'scale3d(1, 1, 1)' },
},
wobble: {
'0%': { transform: 'translate3d(0, 0, 0)' },
'15%': { transform: 'translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)' },
'30%': { transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)' },
'45%': { transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)' },
'60%': { transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)' },
'75%': { transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)' },
'100%': { transform: 'translate3d(0, 0, 0)' },
},
jello: {
'0%, 11.1%, 100%': { transform: 'translate3d(0, 0, 0)' },
'22.2%': { transform: 'skewX(-12.5deg) skewY(-12.5deg)' },
'33.3%': { transform: 'skewX(6.25deg) skewY(6.25deg)' },
'44.4%': { transform: 'skewX(-3.125deg) skewY(-3.125deg)' },
'55.5%': { transform: 'skewX(1.5625deg) skewY(1.5625deg)' },
'66.6%': { transform: 'skewX(-0.78125deg) skewY(-0.78125deg)' },
'77.7%': { transform: 'skewX(0.390625deg) skewY(0.390625deg)' },
'88.8%': { transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)' },
},
flash: {
'0%, 50%, 100%': { opacity: '1' },
'25%, 75%': { opacity: '0' },
},
flip: {
'0%': { transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg)' },
'40%': { transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)' },
'50%': { transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)' },
'80%': { transform: 'perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)' },
'100%': { transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)' },
},
lightSpeedIn: {
'0%': { transform: 'translate3d(100%, 0, 0) skewX(-30deg)', opacity: '0' },
'60%': { transform: 'skewX(20deg)', opacity: '1' },
'80%': { transform: 'skewX(-5deg)' },
'100%': { transform: 'translate3d(0, 0, 0)' },
},
lightSpeedOut: {
'0%': { opacity: '1' },
'100%': { transform: 'translate3d(100%, 0, 0) skewX(30deg)', opacity: '0' },
},
rollIn: {
'0%': { opacity: '0', transform: 'translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)' },
'100%': { opacity: '1', transform: 'translate3d(0, 0, 0)' },
},
rollOut: {
'0%': { opacity: '1' },
'100%': { opacity: '0', transform: 'translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)' },
},
zoomIn: {
'0%': { opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)' },
'50%': { opacity: '1' },
},
zoomOut: {
'0%': { opacity: '1' },
'50%': { opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)' },
'100%': { opacity: '0' },
},
},
// Enhanced background size
backgroundSize: {
'auto': 'auto',
'cover': 'cover',
'contain': 'contain',
'50%': '50%',
'100%': '100%',
'200%': '200%',
'300%': '300%',
'400%': '400%',
},
// Enhanced backdrop blur
backdropBlur: {
'none': '0',
'sm': '4px',
'DEFAULT': '8px',
'md': '12px',
'lg': '16px',
'xl': '24px',
'2xl': '40px',
'3xl': '64px',
},
// Enhanced box shadow
boxShadow: {
'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
'DEFAULT': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
'none': 'none',
// Custom shadows
'glow': '0 0 20px rgb(59 130 246 / 0.3)',
'glow-lg': '0 0 40px rgb(59 130 246 / 0.4)',
'colored': '0 10px 15px -3px rgb(59 130 246 / 0.1), 0 4px 6px -4px rgb(59 130 246 / 0.1)',
'colored-lg': '0 20px 25px -5px rgb(59 130 246 / 0.1), 0 8px 10px -6px rgb(59 130 246 / 0.1)',
},
// Enhanced drop shadow
dropShadow: {
'sm': '0 1px 1px rgb(0 0 0 / 0.05)',
'DEFAULT': ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
'md': ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'],
'lg': ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'],
'xl': ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'],
'2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
'none': '0 0 #0000',
// Custom drop shadows
'glow': '0 0 10px rgb(59 130 246 / 0.5)',
'glow-lg': '0 0 20px rgb(59 130 246 / 0.6)',
},
// Enhanced transition timing
transitionTimingFunction: {
'DEFAULT': 'cubic-bezier(0.4, 0, 0.2, 1)',
'linear': 'linear',
'in': 'cubic-bezier(0.4, 0, 1, 1)',
'out': 'cubic-bezier(0, 0, 0.2, 1)',
'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
// Custom easing
'bounce': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
'elastic': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
'back': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
'anticipate': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
},
// Enhanced transition duration
transitionDuration: {
'0': '0ms',
'75': '75ms',
'100': '100ms',
'150': '150ms',
'200': '200ms',
'300': '300ms',
'500': '500ms',
'700': '700ms',
'1000': '1000ms',
'1500': '1500ms',
'2000': '2000ms',
'3000': '3000ms',
},
// Enhanced z-index scale
zIndex: {
'0': '0',
'10': '10',
'20': '20',
'30': '30',
'40': '40',
'50': '50',
'60': '60',
'70': '70',
'80': '80',
'90': '90',
'100': '100',
'auto': 'auto',
},
// Enhanced container sizes
container: {
center: true,
padding: {
'DEFAULT': '1rem',
'sm': '1.5rem',
'lg': '2rem',
'xl': '2.5rem',
'2xl': '3rem',
},
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
},
},
// Enhanced screens for responsive design
screens: {
'xs': '475px',
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
'3xl': '1920px',
// Custom breakpoints
'mobile': {'max': '639px'},
'tablet': {'min': '640px', 'max': '1023px'},
'desktop': {'min': '1024px'},
'wide': {'min': '1536px'},
'ultrawide': {'min': '1920px'},
// Height-based breakpoints
'short': {'raw': '(max-height: 600px)'},
'tall': {'raw': '(min-height: 800px)'},
// Orientation breakpoints
'portrait': {'raw': '(orientation: portrait)'},
'landscape': {'raw': '(orientation: landscape)'},
// Hover capability
'hover': {'raw': '(hover: hover)'},
'no-hover': {'raw': '(hover: none)'},
// Motion preferences
'motion-safe': {'raw': '(prefers-reduced-motion: no-preference)'},
'motion-reduce': {'raw': '(prefers-reduced-motion: reduce)'},
// Color scheme preferences
'dark-scheme': {'raw': '(prefers-color-scheme: dark)'},
'light-scheme': {'raw': '(prefers-color-scheme: light)'},
// High contrast
'high-contrast': {'raw': '(prefers-contrast: high)'},
'low-contrast': {'raw': '(prefers-contrast: low)'},
},
// Enhanced typography plugin configuration
typography: {
DEFAULT: {
css: {
maxWidth: 'none',
color: 'inherit',
lineHeight: '1.7',
fontSize: 'clamp(1rem, 1.2vw, 1.125rem)',
a: {
color: 'inherit',
textDecoration: 'none',
fontWeight: '500',
borderBottom: '1px solid transparent',
transition: 'all 0.2s ease',
'&:hover': {
borderBottomColor: 'currentColor',
textDecoration: 'none',
},
},
'[class~="lead"]': {
color: 'inherit',
fontSize: '1.25em',
lineHeight: '1.6',
marginTop: '1.2em',
marginBottom: '1.2em',
},
strong: {
color: 'inherit',
fontWeight: '600',
},
'ol[type="A"]': {
'--list-counter-style': 'upper-alpha',
},
'ol[type="a"]': {
'--list-counter-style': 'lower-alpha',
},
'ol[type="A" s]': {
'--list-counter-style': 'upper-alpha',
},
'ol[type="a" s]': {
'--list-counter-style': 'lower-alpha',
},
'ol[type="I"]': {
'--list-counter-style': 'upper-roman',
},
'ol[type="i"]': {
'--list-counter-style': 'lower-roman',
},
'ol[type="I" s]': {
'--list-counter-style': 'upper-roman',
},
'ol[type="i" s]': {
'--list-counter-style': 'lower-roman',
},
'ol[type="1"]': {
'--list-counter-style': 'decimal',
},
'ol > li': {
position: 'relative',
},
'ol > li::before': {
content: 'counter(list-item, var(--list-counter-style, decimal)) "."',
position: 'absolute',
fontWeight: '400',
color: 'inherit',
},
'ul > li': {
position: 'relative',
},
'ul > li::before': {
content: '""',
position: 'absolute',
backgroundColor: 'currentColor',
borderRadius: '50%',
},
hr: {
borderColor: 'inherit',
borderTopWidth: 1,
marginTop: '3em',
marginBottom: '3em',
},
blockquote: {
fontWeight: '500',
fontStyle: 'italic',
color: 'inherit',
borderLeftWidth: '0.25rem',
borderLeftColor: 'inherit',
quotes: '"\\201C""\\201D""\\2018""\\2019"',
marginTop: '1.6em',
marginBottom: '1.6em',
paddingLeft: '1em',
},
h1: {
color: 'inherit',
fontWeight: '800',
fontSize: 'clamp(2rem, 5vw, 3rem)',
lineHeight: '1.1',
letterSpacing: '-0.025em',
},
h2: {
color: 'inherit',
fontWeight: '700',
fontSize: 'clamp(1.75rem, 4vw, 2.5rem)',
lineHeight: '1.2',
letterSpacing: '-0.02em',
},
h3: {
color: 'inherit',
fontWeight: '600',
fontSize: 'clamp(1.5rem, 3vw, 2rem)',
lineHeight: '1.25',
letterSpacing: '-0.015em',
},
h4: {
color: 'inherit',
fontWeight: '600',
fontSize: 'clamp(1.25rem, 2.5vw, 1.875rem)',
lineHeight: '1.3',
letterSpacing: '-0.01em',
},
code: {
color: 'inherit',
fontWeight: '600',
fontSize: '0.875em',
},
'code::before': {
content: '""',
},
'code::after': {
content: '""',
},
pre: {
color: 'inherit',
backgroundColor: 'transparent',
overflowX: 'auto',
fontWeight: '400',
fontSize: '0.875em',
lineHeight: '1.7',
marginTop: '1.7em',
marginBottom: '1.7em',
borderRadius: '0.75rem',
paddingTop: '0.8571429em',
paddingRight: '1.1428571em',
paddingBottom: '0.8571429em',
paddingLeft: '1.1428571em',
},
'pre code': {
backgroundColor: 'transparent',
borderWidth: '0',
borderRadius: '0',
padding: '0',
fontWeight: 'inherit',
color: 'inherit',
fontSize: 'inherit',
fontFamily: 'inherit',
lineHeight: 'inherit',
},
'pre code::before': {
content: 'none',
},
'pre code::after': {
content: 'none',
},
table: {
width: '100%',
tableLayout: 'auto',
textAlign: 'left',
marginTop: '2em',
marginBottom: '2em',
fontSize: '0.875em',
lineHeight: '1.7142857',
},
thead: {
color: 'inherit',
fontWeight: '600',
borderBottomWidth: '1px',
borderBottomColor: 'inherit',
},
'thead th': {
verticalAlign: 'bottom',
paddingRight: '0.5714286em',
paddingBottom: '0.5714286em',
paddingLeft: '0.5714286em',
},
'tbody tr': {
borderBottomWidth: '1px',
borderBottomColor: 'inherit',
},
'tbody tr:last-child': {
borderBottomWidth: '0',
},
'tbody td': {
verticalAlign: 'baseline',
},
tfoot: {
borderTopWidth: '1px',
borderTopColor: 'inherit',
},
'tfoot td': {
verticalAlign: 'top',
},
figure: {
marginTop: '2em',
marginBottom: '2em',
},
'figure > *': {
marginTop: '0',
marginBottom: '0',
},
figcaption: {
color: 'inherit',
fontSize: '0.875em',
lineHeight: '1.4285714',
marginTop: '0.8571429em',
},
},
},
sm: {
css: {
fontSize: '0.875rem',
lineHeight: '1.7142857',
},
},
lg: {
css: {
fontSize: '1.125rem',
lineHeight: '1.7777778',
},
},
xl: {
css: {
fontSize: '1.25rem',
lineHeight: '1.8',
},
},
'2xl': {
css: {
fontSize: '1.5rem',
lineHeight: '1.6666667',
},
},
},
},
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/container-queries'),
// Custom plugin for additional utilities
function({ addUtilities, addComponents, theme }) {
// Add custom utilities
addUtilities({
'.text-balance': {
'text-wrap': 'balance',
},
'.text-pretty': {
'text-wrap': 'pretty',
},
'.scrollbar-hide': {
'-ms-overflow-style': 'none',
'scrollbar-width': 'none',
'&::-webkit-scrollbar': {
display: 'none',
},
},
'.scrollbar-default': {
'-ms-overflow-style': 'auto',
'scrollbar-width': 'auto',
'&::-webkit-scrollbar': {
display: 'block',
},
},
'.safe-top': {
'padding-top': 'env(safe-area-inset-top)',
},
'.safe-bottom': {
'padding-bottom': 'env(safe-area-inset-bottom)',
},
'.safe-left': {
'padding-left': 'env(safe-area-inset-left)',
},
'.safe-right': {
'padding-right': 'env(safe-area-inset-right)',
},
});
// Add custom components
addComponents({
'.btn': {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: theme('borderRadius.xl'),
fontWeight: theme('fontWeight.semibold'),
fontSize: theme('fontSize.sm'),
lineHeight: theme('lineHeight.none'),
textDecoration: 'none',
transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
cursor: 'pointer',
userSelect: 'none',
touchAction: 'manipulation',
'&:focus': {
outline: '2px solid transparent',
outlineOffset: '2px',
},
'&:focus-visible': {
outline: '2px solid',
outlineColor: theme('colors.blue.500'),
outlineOffset: '2px',
},
'&:disabled': {
opacity: '0.5',
cursor: 'not-allowed',
},
},
'.btn-sm': {
padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
fontSize: theme('fontSize.xs'),
},
'.btn-md': {
padding: `${theme('spacing.3')} ${theme('spacing.6')}`,
fontSize: theme('fontSize.sm'),
},
'.btn-lg': {
padding: `${theme('spacing.4')} ${theme('spacing.8')}`,
fontSize: theme('fontSize.base'),
},
'.card-modern': {
backgroundColor: theme('colors.white'),
borderRadius: theme('borderRadius.2xl'),
boxShadow: theme('boxShadow.sm'),
border: `1px solid ${theme('colors.gray.200')}`,
overflow: 'hidden',
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
'&:hover': {
boxShadow: theme('boxShadow.lg'),
transform: 'scale(1.02)',
},
},
'.glass-modern': {
backgroundColor: 'rgba(255, 255, 255, 0.1)',
backdropFilter: 'blur(16px)',
WebkitBackdropFilter: 'blur(16px)',
border: '1px solid rgba(255, 255, 255, 0.2)',
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
},
'.container-modern': {
width: '100%',
marginLeft: 'auto',
marginRight: 'auto',
paddingLeft: 'clamp(1rem, 5vw, 2rem)',
paddingRight: 'clamp(1rem, 5vw, 2rem)',
maxWidth: theme('screens.2xl'),
},
});
},
],
};
module.exports = config;