adas-team-website/tailwind.config.js at react-dev · adasdevelopers/adas-team-website · 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
const colors = require("tailwindcss/colors");

module.exports = {
	purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
	darkMode: false, // or 'media' or 'class'
	theme: {
		fontFamily: {
			title: ["Spartan", "sans-serif"],
			body: ["Open\\ Sans", "sans-serif"],
		},
		extend: {
			colors: {
				blue: "#39b6fb",
				navy: "#253e4b",
				white: "#ffffff",
				pink: "#f8bbda",
				black: "#080E11",
				"light-blue": "#deeffc",
				lime: colors.lime,
				red: colors.red,
			},
			keyframes: {
				"fade-in-down": {
					"0%": {
						opacity: "0",
						transform: "translateY(-50px)",
					},
					"100%": {
						opacity: "1",
						transform: "translateY(0)",
					},
				},
			},
			animation: {
				wiggle: "wiggle 1s ease-in-out infinite",
				"fade-in-down": "fade-in-down 1s ease-out",
			},
			width: {
				"11/10": "110%",
				"6/5": "120%",
				"7/5": "140%",
			},
			gridTemplateRows: {
				footer: "repeat(3, minmax(0, auto))",
			},
			gridTemplateColumns: {
				footer: "repeat(2, minmax(0, auto))",
			},
			minHeight: {
				px: "100px",
			},
		},
	},
	variants: {
		extend: {},
	},
	plugins: [],
};