stadtwerke/innungsapp/apps/admin/tailwind.config.ts

65 lines
1.7 KiB
TypeScript

import type { Config } from 'tailwindcss'
import plugin from 'tailwindcss/plugin'
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
brand: {
50: '#fdf8f0',
100: '#f9edd7',
200: '#f1d6b0',
300: '#e6ba83',
400: '#d99d58',
500: 'var(--color-brand-primary, #C99738)',
600: 'var(--color-brand-hover, #A6752C)',
700: '#8c5d26',
800: '#734c24',
900: '#5e3f21',
},
},
fontFamily: {
sans: ['var(--font-inter)', 'Inter', 'system-ui', 'sans-serif'],
outfit: ['var(--font-outfit)', 'Outfit', 'sans-serif'],
},
animation: {
blob: 'blob 7s infinite',
'fade-in-up': 'fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards',
},
keyframes: {
blob: {
'0%': { transform: 'translate(0px, 0px) scale(1)' },
'33%': { transform: 'translate(30px, -50px) scale(1.1)' },
'66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
'100%': { transform: 'translate(0px, 0px) scale(1)' },
},
fadeInUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
},
},
},
plugins: [
plugin(function ({ matchUtilities, theme }) {
matchUtilities(
{
'animation-delay': (value) => {
return {
'animation-delay': value,
}
},
},
{ values: theme('transitionDelay') }
)
}),
],
}
export default config