slice-deck/tailwind.config.ts at main · prismicio-solution-engineering/slice-deck · 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    './slices/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      fontSize: {
        xs: ["0.75rem", { lineHeight: "1rem" }],
        sm: ["0.875rem", { lineHeight: "1.5rem" }],
        base: ["1rem", { lineHeight: "1.75rem" }],
        lg: ["1.125rem", { lineHeight: "2rem" }],
        xl: ["1.25rem", { lineHeight: "2rem" }],
        "2xl": ["1.5rem", { lineHeight: "2rem" }],
        "3xl": ["2rem", { lineHeight: "2.5rem" }],
        "4xl": ["2.5rem", { lineHeight: "3.5rem" }],
        "5xl": ["3rem", { lineHeight: "3.5rem" }],
        "6xl": ["3.75rem", { lineHeight: "1" }],
        "7xl": ["4.5rem", { lineHeight: "1.1" }],
        "8xl": ["6rem", { lineHeight: "1" }],
        "9xl": ["8rem", { lineHeight: "1" }],
      },
      colors: {
        primary: {
          orange: "#ED6B22",
          pink: "#F97289",
          green: "#3BBB96",
          purple: "#8E44EC",
          blue: "#59B5F8"
        },
        secondary: {
          orange: "#F39A68",
          pink: "#F7A1B0",
          green: "#75DCC0",
          purple: "#B382F2",
          blue: "#87D9FD"
        },
        tertiary: {
          orange: "#FCDAC4",
          pink: "#FFD6DE",
          green: "#D4F2E9",
          purple: "#E8C7FF",
          blue: "#C3EEFE"
        },
        quaternary: {
          orange: "#FEF1E9",
          pink: "#FFE5EA",
          green: "#E8F8F3",
          purple: "#F5E6FF",
          blue: "#E6F7FE"
        },
        gray: {
          darker: "#1F1F1F",
          dark: "#303030",
          base: "#505050",
        },
        silver: {
          darker: "#A4A4A4",
          dark: "#ACACAC",
          base: "#EEEEEE",
          light: "#F7F7F7"
        },
        white: "#FFFFFF",
        black: "#000000",
        transparent: "transparent"
      },
      maxWidth: {
        "2xl": "40rem",
        "screen-3xl": "1792px"
      },
      borderRadius: {
        "4xl": "2rem",
      },
      fontFamily: {
        headings: ["var(--font-headings)"],
        copy: ["var(--font-copy)"],
        code: ["var(--font-code)"],
      },
    },
  },
  safelist: [
    "text-primary-orange",
    "text-primary-pink",
    "text-primary-green",
    "text-primary-purple",
    "text-primary-blue",
    "text-secondary-orange",
    "text-secondary-pink",
    "text-secondary-green",
    "text-secondary-purple",
    "text-secondary-blue",
    "bg-quaternary-orange",
    "bg-quaternary-pink",
    "bg-quaternary-green",
    "bg-quaternary-purple",
    "bg-quaternary-blue",
    "bg-tertiary-orange",
    "bg-tertiary-pink",
    "bg-tertiary-green",
    "bg-tertiary-purple",
    "bg-tertiary-blue",
  ],
  plugins: [
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
  ],
};
export default config;