|
|
|
module.exports = { |
|
content: [ |
|
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}', |
|
'./src/components/**/*.{js,ts,jsx,tsx,mdx}', |
|
'./src/app/**/*.{js,ts,jsx,tsx,mdx}', |
|
'./src/ui/**/*.{js,ts,jsx,tsx,mdx}', |
|
], |
|
"darkMode": "class", |
|
theme: { |
|
extend: { |
|
colors: { |
|
'primary-blue': 'rgb(var(--color-primary-blue) / <alpha-value>)', |
|
secondary: 'rgb(var(--color-secondary) / <alpha-value>)', |
|
'primary-background': 'rgb(var(--primary-background) / <alpha-value>)', |
|
'primary-text': 'rgb(var(--primary-text) / <alpha-value>)', |
|
'secondary-text': 'rgb(var(--secondary-text) / <alpha-value>)', |
|
'light-text': 'rgb(var(--light-text) / <alpha-value>)', |
|
'primary-border': 'rgb(var(--primary-border) / <alpha-value>)', |
|
}, |
|
keyframes: { |
|
slideDownAndFade: { |
|
from: { opacity: 0, transform: 'translateY(-2px)' }, |
|
to: { opacity: 1, transform: 'translateY(0)' }, |
|
}, |
|
slideLeftAndFade: { |
|
from: { opacity: 0, transform: 'translateX(2px)' }, |
|
to: { opacity: 1, transform: 'translateX(0)' }, |
|
}, |
|
slideUpAndFade: { |
|
from: { opacity: 0, transform: 'translateY(2px)' }, |
|
to: { opacity: 1, transform: 'translateY(0)' }, |
|
}, |
|
slideRightAndFade: { |
|
from: { opacity: 0, transform: 'translateX(2px)' }, |
|
to: { opacity: 1, transform: 'translateX(0)' }, |
|
}, |
|
}, |
|
animation: { |
|
slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', |
|
slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', |
|
slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', |
|
slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', |
|
}, |
|
}, |
|
}, |
|
plugins: [require('@headlessui/tailwindcss'), require('tailwind-scrollbar')], |
|
} |
|
|
