Files
videopeersjs/client/tailwind.config.js
2025-09-16 01:54:29 +02:00

71 líneas
2.4 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
fontFamily: {
// Primary font stack with local fonts
'sans': ['var(--font-primary)', 'Inter', 'system-ui', 'sans-serif'],
'body': ['var(--font-primary)', 'Inter', 'system-ui', 'sans-serif'],
'accent': ['var(--font-accent)', 'Poppins', 'system-ui', 'sans-serif'],
'display': ['var(--font-display)', 'Space Grotesk', 'Josefin Sans', 'system-ui', 'sans-serif'],
'mono': ['var(--font-mono)', 'monospace'],
// Legacy support
'poppins': ['Poppins', 'system-ui', 'sans-serif'],
'josefin': ['Josefin Sans', 'system-ui', 'sans-serif'],
'inter': ['Inter', 'system-ui', 'sans-serif'],
'space-grotesk': ['Space Grotesk', 'system-ui', 'sans-serif']
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
keyframes: {
pulse: {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.6' },
},
'fade-in': {
'0%': { opacity: '0', transform: 'translateY(10px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
'scale-in': {
'0%': { transform: 'scale(0.8)', opacity: '0' },
'100%': { transform: 'scale(1)', opacity: '1' },
}
},
animation: {
'pulse': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'fade-in': 'fade-in 0.5s ease-out',
'scale-in': 'scale-in 0.3s ease-out',
},
backdropBlur: {
xs: '2px',
},
screens: {
mxxl: { 'max': '1535px' },
// => @media (max-width: 1535px) { ... }
mxl: { 'max': '1279px' },
// => @media (max-width: 1279px) { ... }
mlg: { 'max': '1023px' },
// => @media (max-width: 1023px) { ... }
mmd: { 'max': '767px' },
// => @media (max-width: 767px) { ... }
msm: { 'max': '639px' },
// => @media (max-width: 639px) { ... }
mss: { 'max': '550px' },
// => @media (max-width: 550px) { ... }
mxs: { 'max': "480px" }
// => @media (max-width: 480px) { ... }
},
},
},
plugins: [],
}