dosimex_site/tailwind.config.js at master · BHC-IT/dosimex_site · 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
/** @type {import('tailwindcss').Config} */
const config = {
	content: [
		'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
		'./src/Components/**/*.{js,ts,jsx,tsx,mdx}',
		'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
	],
	theme: {
		extend: {
			colors: {
				// Matching existing CSS custom properties
				main: 'var(--main)',
				dark: 'var(--dark)',
				light: 'var(--light)',
				flash: 'var(--flash)',
				flashTrans: 'var(--flashTrans)',
				grey: 'var(--grey)',
				'grey-bg': 'var(--grey-bg)',
				'yellow-bg': 'var(--yellow-bg)',
				orange: 'var(--orange)',
			},
			fontFamily: {
				lato: ['Lato', 'sans-serif'],
				nunito: ['Nunito', 'sans-serif'],
				// Set Lato as default sans font family to override Tailwind's default
				sans: ['Lato', 'sans-serif'],
			},
			fontSize: {
				h1: '7rem',
				h2: '5rem',
				h3: '4rem',
				h4: '3rem',
				h5: '2rem',
				// Base font sizes from globals.css
				base: '1.7rem', // body font-size from globals.css
				'base-xs': '62.5%', // html font-size from globals.css
			},
			screens: {
				xs: '480px',
				tablet: '640px',
				laptop: '1024px',
				desktop: '1250px',
			},
			spacing: {
				// Common viewport-based spacing from globals.css
				container: '5vh 10vw', // .container padding from globals.css
			},
			borderRadius: {
				button: '50px', // button border-radius from globals.css
			},
		},
	},
	plugins: [],
}

module.exports = config