97 lines
3.2 KiB
JavaScript
97 lines
3.2 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
const plugin = require('tailwindcss/plugin');
|
|
|
|
module.exports = {
|
|
darkMode: 'class', // supports .dark class
|
|
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
background: 'var(--color-background)',
|
|
foreground: 'var(--color-foreground)',
|
|
card: 'var(--color-card)',
|
|
'card-foreground': 'var(--color-card-foreground)',
|
|
popover: 'var(--color-popover)',
|
|
'popover-foreground': 'var(--color-popover-foreground)',
|
|
primary: 'var(--color-primary)',
|
|
'primary-foreground': 'var(--color-primary-foreground)',
|
|
secondary: 'var(--color-secondary)',
|
|
'secondary-foreground': 'var(--color-secondary-foreground)',
|
|
muted: 'var(--color-muted)',
|
|
'muted-foreground': 'var(--color-muted-foreground)',
|
|
accent: 'var(--color-accent)',
|
|
'accent-foreground': 'var(--color-accent-foreground)',
|
|
destructive: 'var(--color-destructive)',
|
|
'destructive-foreground': 'var(--color-destructive-foreground)',
|
|
border: 'var(--color-border)',
|
|
input: 'var(--color-input)',
|
|
ring: 'var(--color-ring)',
|
|
},
|
|
borderRadius: {
|
|
sm: 'var(--radius-sm)',
|
|
md: 'var(--radius-md)',
|
|
lg: 'var(--radius-lg)',
|
|
xl: 'var(--radius-xl)',
|
|
},
|
|
fontFamily: {
|
|
heading: ['Syne', 'sans-serif'],
|
|
body: ['Geist', 'DM Sans', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
|
|
},
|
|
backdropBlur: {
|
|
sm: '12px',
|
|
md: '20px',
|
|
},
|
|
keyframes: {
|
|
blink: {
|
|
'0%, 100%': { opacity: '1' },
|
|
'50%': { opacity: '0' },
|
|
},
|
|
float: {
|
|
'0%, 100%': { transform: 'translateY(0px)' },
|
|
'50%': { transform: 'translateY(-8px)' },
|
|
},
|
|
fadeInUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(30px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
},
|
|
animation: {
|
|
blink: 'blink 1s step-end infinite',
|
|
float: 'float 4s ease-in-out infinite',
|
|
fadeInUp: 'fadeInUp 0.7s ease forwards',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('tw-animate-css'),
|
|
plugin(function({ addUtilities }) {
|
|
addUtilities({
|
|
'.glass': {
|
|
background: 'rgba(255, 255, 255, 0.04)',
|
|
'backdrop-filter': 'blur(12px)',
|
|
'-webkit-backdrop-filter': 'blur(12px)',
|
|
border: '1px solid rgba(255, 255, 255, 0.08)',
|
|
},
|
|
'.glass-strong': {
|
|
background: 'rgba(255, 255, 255, 0.07)',
|
|
'backdrop-filter': 'blur(20px)',
|
|
'-webkit-backdrop-filter': 'blur(20px)',
|
|
border: '1px solid rgba(255, 255, 255, 0.12)',
|
|
},
|
|
'.navbar-glass': {
|
|
background: 'rgba(8, 8, 8, 0.6)',
|
|
'backdrop-filter': 'blur(20px)',
|
|
'-webkit-backdrop-filter': 'blur(20px)',
|
|
'border-bottom': '1px solid rgba(255, 255, 255, 0.06)',
|
|
},
|
|
'.navbar-glass-solid': {
|
|
background: 'rgba(8, 8, 8, 0.92)',
|
|
'backdrop-filter': 'blur(20px)',
|
|
'-webkit-backdrop-filter': 'blur(20px)',
|
|
'border-bottom': '1px solid rgba(255, 255, 255, 0.08)',
|
|
},
|
|
});
|
|
}),
|
|
],
|
|
}; |