| 1 | import colors from 'tailwindcss/colors'; |
| 2 | import { Config } from 'tailwindcss'; |
| 3 | |
| 4 | export default { |
| 5 | content: [ |
| 6 | './app/**/*.{js,ts,jsx,tsx,mdx}', |
| 7 | ], |
| 8 | future: { |
| 9 | hoverOnlyWhenSupported: true, |
| 10 | }, |
| 11 | darkMode: 'class', |
| 12 | theme: { |
| 13 | extend: { |
| 14 | // https://vercel.com/design/color |
| 15 | colors: { |
| 16 | gray: colors.zinc, |
| 17 | 'gray-1000': 'rgb(17,17,19)', |
| 18 | 'gray-1100': 'rgb(10,10,11)', |
| 19 | vercel: { |
| 20 | pink: '#FF0080', |
| 21 | blue: '#0070F3', |
| 22 | cyan: '#50E3C2', |
| 23 | orange: '#F5A623', |
| 24 | violet: '#7928CA', |
| 25 | }, |
| 26 | }, |
| 27 | backgroundImage: ({ theme }) => ({ |
| 28 | 'vc-border-gradient': `radial-gradient(at left top, ${theme( |
| 29 | 'colors.gray.500', |
| 30 | )}, 50px, ${theme('colors.gray.800')} 50%)`, |
| 31 | }), |
| 32 | keyframes: ({ theme }) => ({ |
| 33 | rerender: { |
| 34 | '0%': { |
| 35 | ['border-color']: theme('colors.vercel.pink'), |
| 36 | }, |
| 37 | '40%': { |
| 38 | ['border-color']: theme('colors.vercel.pink'), |
| 39 | }, |
| 40 | }, |
| 41 | highlight: { |
| 42 | '0%': { |
| 43 | background: theme('colors.vercel.pink'), |
| 44 | color: theme('colors.white'), |
| 45 | }, |
| 46 | '40%': { |
| 47 | background: theme('colors.vercel.pink'), |
| 48 | color: theme('colors.white'), |
| 49 | }, |
| 50 | }, |
| 51 | loading: { |
| 52 | '0%': { |
| 53 | opacity: '.2', |
| 54 | }, |
| 55 | '20%': { |
| 56 | opacity: '1', |
| 57 | transform: 'translateX(1px)', |
| 58 | }, |
| 59 | to: { |
| 60 | opacity: '.2', |
| 61 | }, |
| 62 | }, |
| 63 | shimmer: { |
| 64 | '100%': { |
| 65 | transform: 'translateX(100%)', |
| 66 | }, |
| 67 | }, |
| 68 | translateXReset: { |
| 69 | '100%': { |
| 70 | transform: 'translateX(0)', |
| 71 | }, |
| 72 | }, |
| 73 | fadeToTransparent: { |
| 74 | '0%': { |
| 75 | opacity: '1', |
| 76 | }, |
| 77 | '40%': { |
| 78 | opacity: '1', |
| 79 | }, |
| 80 | '100%': { |
| 81 | opacity: '0', |
| 82 | }, |
| 83 | }, |
| 84 | }), |
| 85 | }, |
| 86 | }, |
| 87 | plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')], |
| 88 | } satisfies Config; |