107 lines
2.8 KiB
JavaScript
107 lines
2.8 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: 'class',
|
|
content: [
|
|
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
theme: {
|
|
fontFamily: {
|
|
sans: [
|
|
'var(--font-montserrat)',
|
|
'Montserrat',
|
|
'ui-sans-serif',
|
|
'system-ui',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'Segoe UI',
|
|
'Roboto',
|
|
'Helvetica Neue',
|
|
'Arial',
|
|
'Noto Sans',
|
|
'sans-serif',
|
|
],
|
|
body: [
|
|
'var(--font-open-sans)',
|
|
'Open Sans',
|
|
'ui-sans-serif',
|
|
'system-ui',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'Segoe UI',
|
|
'Roboto',
|
|
'Helvetica Neue',
|
|
'Arial',
|
|
'Noto Sans',
|
|
'sans-serif',
|
|
],
|
|
},
|
|
extend: {
|
|
colors: {
|
|
surface: {
|
|
900: 'rgb(var(--surface-900))',
|
|
800: 'rgb(var(--surface-800))',
|
|
700: 'rgb(var(--surface-700))',
|
|
600: 'rgb(var(--surface-600))',
|
|
500: 'rgb(var(--surface-500))',
|
|
},
|
|
text: {
|
|
primary: 'rgb(var(--text-primary))',
|
|
secondary: 'rgb(var(--text-secondary))',
|
|
muted: 'rgb(var(--text-muted))',
|
|
disabled: 'rgb(var(--text-disabled))',
|
|
},
|
|
accent: {
|
|
DEFAULT: 'rgb(var(--accent))',
|
|
hover: 'rgb(var(--accent-hover))',
|
|
},
|
|
// Aliases retained for existing classes
|
|
bg: {
|
|
DEFAULT: 'rgb(var(--surface-800))',
|
|
light: 'rgb(var(--surface-700))',
|
|
dark: 'rgb(var(--surface-900))',
|
|
},
|
|
},
|
|
fontSize: {
|
|
display: ['6rem', { lineHeight: '1', fontWeight: '200' }],
|
|
'display-sm': ['4rem', { lineHeight: '1', fontWeight: '300' }],
|
|
},
|
|
letterSpacing: {
|
|
tight: '-0.02em',
|
|
wide: '0.05em',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.2s ease-out',
|
|
'slide-up': 'slideUp 0.2s ease-out',
|
|
'horizontal-scroll': 'horizontalScroll 20s linear infinite',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
horizontalScroll: {
|
|
'0%': { transform: 'translateX(0)' },
|
|
'100%': { transform: 'translateX(-50%)' },
|
|
},
|
|
},
|
|
transitionTimingFunction: {
|
|
smooth: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
},
|
|
maxWidth: {
|
|
'8xl': '90rem',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/typography'),
|
|
require('@tailwindcss/aspect-ratio'),
|
|
require('@tailwindcss/forms'),
|
|
],
|
|
}
|