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

64 lines
1.6 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: '#fff1f1',
100: '#ffe1e1',
200: '#ffC7c7',
300: '#ffa0a0',
400: '#ff6b6b',
500: '#E63946',
600: '#d42535',
700: '#b21e2c',
800: '#931d29',
900: '#7a1e27',
},
},
fontFamily: {
sans: ['Inter', 'system-ui', '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