RealBlocks / client /tailwind.config.js
Sebebeb's picture
Added Settings
db82489
Raw
History Blame Contribute Delete
3.36 kB
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
primary: {
50: 'rgb(var(--color-primary-50) / <alpha-value>)',
100: 'rgb(var(--color-primary-100) / <alpha-value>)',
200: 'rgb(var(--color-primary-200) / <alpha-value>)',
300: 'rgb(var(--color-primary-300) / <alpha-value>)',
400: 'rgb(var(--color-primary-400) / <alpha-value>)',
500: 'rgb(var(--color-primary-500) / <alpha-value>)',
600: 'rgb(var(--color-primary-600) / <alpha-value>)',
700: 'rgb(var(--color-primary-700) / <alpha-value>)',
800: 'rgb(var(--color-primary-800) / <alpha-value>)',
900: 'rgb(var(--color-primary-900) / <alpha-value>)',
950: 'rgb(var(--color-primary-950) / <alpha-value>)',
},
surface: {
50: 'rgb(var(--color-surface-50) / <alpha-value>)',
100: 'rgb(var(--color-surface-100) / <alpha-value>)',
200: 'rgb(var(--color-surface-200) / <alpha-value>)',
300: 'rgb(var(--color-surface-300) / <alpha-value>)',
400: 'rgb(var(--color-surface-400) / <alpha-value>)',
500: 'rgb(var(--color-surface-500) / <alpha-value>)',
600: 'rgb(var(--color-surface-600) / <alpha-value>)',
700: 'rgb(var(--color-surface-700) / <alpha-value>)',
800: 'rgb(var(--color-surface-800) / <alpha-value>)',
900: 'rgb(var(--color-surface-900) / <alpha-value>)',
950: 'rgb(var(--color-surface-950) / <alpha-value>)',
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
},
animation: {
'fade-in': 'fadeIn 0.2s ease-in-out',
'slide-up': 'slideUp 0.3s ease-out',
'slide-in-right': 'slideInRight 0.3s ease-out',
'google-wiggle': 'googleWiggle 0.45s cubic-bezier(0.34,1.56,0.64,1)',
'google-shimmer': 'googleShimmer 0.6s ease-in-out',
'pulse-glow': 'pulseGlow 2s ease-in-out infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { transform: 'translateY(10px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
slideInRight: {
'0%': { transform: 'translateX(20px)', opacity: '0' },
'100%': { transform: 'translateX(0)', opacity: '1' },
},
googleWiggle: {
'0%': { transform: 'rotate(0deg) scale(1)' },
'25%': { transform: 'rotate(-10deg) scale(1.1)' },
'50%': { transform: 'rotate(8deg) scale(1.05)' },
'75%': { transform: 'rotate(-3deg) scale(1.02)' },
'100%': { transform: 'rotate(0deg) scale(1)' },
},
googleShimmer: {
'0%': { transform: 'translateX(-100%) skewX(-12deg)' },
'100%': { transform: 'translateX(200%) skewX(-12deg)' },
},
pulseGlow: {
'0%, 100%': { boxShadow: '0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)' },
'50%': { boxShadow: '0 4px 12px rgba(66,133,244,0.08), 0 2px 4px rgba(0,0,0,0.04)' },
},
},
},
},
plugins: [],
};