forked from crowetic/commerce
67 lines
1.5 KiB
JavaScript
67 lines
1.5 KiB
JavaScript
|
const plugin = require('tailwindcss/plugin');
|
||
|
const colors = require('tailwindcss/colors');
|
||
|
|
||
|
/** @type {import('tailwindcss').Config} */
|
||
|
module.exports = {
|
||
|
content: [
|
||
|
'./pages/**/*.{js,ts,jsx,tsx}',
|
||
|
'./components/**/*.{js,ts,jsx,tsx}',
|
||
|
'./icons/**/*.{js,ts,jsx,tsx}',
|
||
|
'./app/**/*.{js,ts,jsx,tsx}'
|
||
|
],
|
||
|
theme: {
|
||
|
extend: {
|
||
|
fontFamily: {
|
||
|
sans: ['var(--font-inter)']
|
||
|
},
|
||
|
colors: {
|
||
|
gray: colors.neutral,
|
||
|
hotPink: '#FF1966',
|
||
|
dark: '#111111',
|
||
|
light: '#FAFAFA',
|
||
|
violetDark: '#4c2889'
|
||
|
},
|
||
|
keyframes: {
|
||
|
fadeIn: {
|
||
|
from: { opacity: 0 },
|
||
|
to: { opacity: 1 }
|
||
|
},
|
||
|
marquee: {
|
||
|
'0%': { transform: 'translateX(0%)' },
|
||
|
'100%': { transform: 'translateX(-100%)' }
|
||
|
},
|
||
|
blink: {
|
||
|
'0%': { opacity: 0.2 },
|
||
|
'20%': { opacity: 1 },
|
||
|
'100% ': { opacity: 0.2 }
|
||
|
}
|
||
|
},
|
||
|
animation: {
|
||
|
fadeIn: 'fadeIn .3s ease-in-out',
|
||
|
carousel: 'marquee 60s linear infinite',
|
||
|
blink: 'blink 1.4s both infinite'
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
future: {
|
||
|
hoverOnlyWhenSupported: true
|
||
|
},
|
||
|
plugins: [
|
||
|
require('@tailwindcss/typography'),
|
||
|
plugin(({ matchUtilities, theme }) => {
|
||
|
matchUtilities(
|
||
|
{
|
||
|
'animation-delay': (value) => {
|
||
|
return {
|
||
|
'animation-delay': value
|
||
|
};
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
values: theme('transitionDelay')
|
||
|
}
|
||
|
);
|
||
|
})
|
||
|
]
|
||
|
};
|