website-frontend/tailwind.config.ts at develop · shapeshift/website-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/* eslint-disable @typescript-eslint/naming-convention */
import type {Config} from 'tailwindcss'

export default {
	content: ['./components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}'],
	theme: {
		container: {
			screens: {
				xl: '1400px'
			}
		},
		extend: {
			colors: {
				white: '#FFFFFF',
				bg: '#0C0D0F',
				headerBg: '#0C0D0F',
				secondBg: '#101114',
				secondHoverBg: '#16181C',
				stroke: '#12141A',
				blue: '#386FF9',
				blueHover: '#1A5BFF',
				secondary: '#E6E6E6'
			},
			listStyleType: {
				roman: 'lower-roman',
				latin: 'lower-alpha'
			},
			keyframes: {
				'border-loading': {
					'0%': {clipPath: 'inset(0 0 0 0)'},
					'25%': {clipPath: 'inset(0 0 0 95%)'},
					'50%': {clipPath: 'inset(95% 0 0 95%)'},
					'75%': {clipPath: 'inset(95% 95% 0 0)'},
					'100%': {clipPath: 'inset(0 95% 0 0)'}
				},
				shimmer: {
					'100%': {
						transform: 'translateX(100%)'
					}
				},
				carousel: {
					to: {transform: 'translateX(-50%)'}
				}
			},
			animation: {
				'border-loading': 'border-loading 1.5s infinite linear',
				spin: 'spin 1s linear infinite',
				shimmer: 'shimmer 1.5s infinite',
				carousel: 'carousel var(--duration, 30s) linear infinite'
			}
		}
	},
	plugins: []
} satisfies Config