commerce/tailwind.config.js
2023-08-17 11:38:09 +09:00

65 lines
1.5 KiB
JavaScript

const plugin = require('tailwindcss/plugin');
const colors = require('tailwindcss/colors');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
subtle: '#606A5F',
dark: '#212720'
},
fontFamily: {
serif: ['var(--font-alpina)', 'serif'],
title: ['var(--font-cinzel)', 'serif'],
japan: ['var(--font-noto)', 'sans-serif']
},
aspectRatio: {
tall: '596 / 845'
},
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/container-queries'),
require('@tailwindcss/typography'),
plugin(({ matchUtilities, theme }) => {
matchUtilities(
{
'animation-delay': (value) => {
return {
'animation-delay': value
};
}
},
{
values: theme('transitionDelay')
}
);
})
]
};