crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-15 22:16:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: convert tailwind configto es module

Browse Source
This commit is contained in:
Victor Gerbrands 2023-05-08 14:59:41 +02:00
parent 804b76d3a2
commit a1045e53e0
1 changed files with 57 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
tailwind.config.js
View File

@ -1,66 +1,64 @@
const plugin = require('tailwindcss/plugin');
const colors = require('tailwindcss/colors');
import { neutral } from 'tailwindcss/colors';
import plugin from 'tailwindcss/plugin';
/** @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)']
export const content = [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./icons/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}'
];
export const theme = {
extend: {
fontFamily: {
sans: ['var(--font-inter)']
},
colors: {
gray: neutral,
hotPink: '#FF1966',
dark: '#111111',
light: '#FAFAFA',
violetDark: '#4c2889'
},
keyframes: {
fadeIn: {
from: { opacity: 0 },
to: { opacity: 1 }
},
colors: {
gray: colors.neutral,
hotPink: '#FF1966',
dark: '#111111',
light: '#FAFAFA',
violetDark: '#4c2889'
marquee: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(-100%)' }
},
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'
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')
}
);
})
]
}
};
export const future = {
hoverOnlyWhenSupported: true
};
export const plugins = [
require('@tailwindcss/typography'),
plugin(({ matchUtilities, theme }) => {
matchUtilities(
{
'animation-delay': (value) => {
return {
'animation-delay': value
};
}
},
{
values: theme('transitionDelay')
}
);
})
];