100-frontend-challenge-with-vue/tailwind.config.ts at master · LR56c/100-frontend-challenge-with-vue · 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import daisyui from "daisyui"
const animate = require( 'tailwindcss-animate' )
import fluid, { extract, screens, fontSize } from 'fluid-tailwind'

/** @type {import('tailwindcss').Config} */
module.exports = {
	darkMode: [ 'class' ],
	safelist: [ 'dark' ],
	prefix  : '',
	content : {
		extract
	},
	theme   : {
		screens,
		fontSize,
		container: {
			center : true,
			padding: '2rem',
			screens: {
				'2xl': '1400px'
			}
		},
		extend   : {
			colors      : {
				'special-purple': '#5343e1',
				border          : 'hsl(var(--border))',
				input           : 'hsl(var(--input))',
				ring            : 'hsl(var(--ring))',
				background      : 'hsl(var(--background))',
				foreground      : 'hsl(var(--foreground))',
				primary         : {
					DEFAULT   : 'hsl(var(--primary))',
					foreground: 'hsl(var(--primary-foreground))'
				},
				secondary       : {
					DEFAULT   : 'hsl(var(--secondary))',
					foreground: 'hsl(var(--secondary-foreground))'
				},
				destructive     : {
					DEFAULT   : 'hsl(var(--destructive))',
					foreground: 'hsl(var(--destructive-foreground))'
				},
				muted           : {
					DEFAULT   : 'hsl(var(--muted))',
					foreground: 'hsl(var(--muted-foreground))'
				},
				accent          : {
					DEFAULT   : 'hsl(var(--accent))',
					foreground: 'hsl(var(--accent-foreground))'
				},
				popover         : {
					DEFAULT   : 'hsl(var(--popover))',
					foreground: 'hsl(var(--popover-foreground))'
				},
				card            : {
					DEFAULT   : 'hsl(var(--card))',
					foreground: 'hsl(var(--card-foreground))'
				}
			},
			borderRadius: {
				xl: 'calc(var(--radius) + 4px)',
				lg: 'var(--radius)',
				md: 'calc(var(--radius) - 2px)',
				sm: 'calc(var(--radius) - 4px)'
			},
			keyframes   : {
				'accordion-down'  : {
					from: { height: 0 },
					to  : { height: 'var(--radix-accordion-content-height)' }
				},
				'accordion-up'    : {
					from: { height: 'var(--radix-accordion-content-height)' },
					to  : { height: 0 }
				},
				'collapsible-down': {
					from: { height: 0 },
					to  : { height: 'var(--radix-collapsible-content-height)' }
				},
				'collapsible-up'  : {
					from: { height: 'var(--radix-collapsible-content-height)' },
					to  : { height: 0 }
				}
			},
			animation   : {
				'accordion-down'  : 'accordion-down 0.2s ease-out',
				'accordion-up'    : 'accordion-up 0.2s ease-out',
				'collapsible-down': 'collapsible-down 0.2s ease-in-out',
				'collapsible-up'  : 'collapsible-up 0.2s ease-in-out'
			}
		}
	},
	plugins : [ animate, fluid, function ( { addUtilities } ) {
		const newUtilities = {
			'.no-scrollbar::-webkit-scrollbar': {
				display: 'none'
			},
			'.no-scrollbar'                   : {
				'-ms-overflow-style': 'none',
				'scrollbar-width'   : 'none'
			}
		}
		addUtilities( newUtilities )
	} ]
}