kannibales/tailwind.config.js at dev · nvvvrro/kannibales · 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
const colors = require("tailwindcss/colors");
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  mode: "jit",
  darkMode: "class",
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  important: true,
  i18n: {
    locales: ["en-US"],
    defaultLocale: "en-US",
  },
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        check: "url('/icons/check.svg')",
        landscape: "url('/images/landscape/2.jpg')",
      }),
      pacing: {
        128: "32rem",
        144: "36rem",
      },
      borderRadius: {
        none: "0",
        sm: ".125rem",
        DEFAULT: ".25rem",
        lg: ".5rem",
        full: "9999px",
      },
      zIndex: {
        "-1": "-1",
      },
      transformOrigin: {
        0: "0%",
      },
      scale: {
        85: "0.85",
      },
    },
    screens: {
      "2xs": "360px",
      xs: "480px",
      mobile: "640px",
      md: "768px",
      desktop: "1024px",
      xl: "1280px",
      "2xl": "1536px",
    },
    colors: {
      primary: {
        main: colors.indigo[200],
        dark: colors.indigo[900],
        light: colors.indigo[100],
        contrast: colors.indigo[500],
      },
      secondary: {
        main: colors.indigo[200],
        dark: colors.indigo[800],
        light: colors.indigo[50],
        contrast: colors.indigo[500],
      },
      btn: {
        main: colors.pink[400],
        dark: colors.pink[900],
        light: colors.pink[200],
        contrast: colors.rose[600],
        current: colors.pink[500],
        secondary: colors.blue[500],
      },
      tx: {
        title: colors.pink[400],
        subtitle: colors.indigo[600],
        ph: colors.indigo[300],

        main: colors.gray[500],
        dark: colors.gray[900],
        light: colors.gray[100],
        current: colors.gray[600],

        warning: colors.orange[500],
        success: colors.green[500],
        error: colors.red[500],
      },
      transparent: "transparent",
      current: "currentColor",
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      indigo: colors.indigo,
      yellow: colors.yellow,
      rose: colors.rose,
      pink: colors.pink,
    },
  },
  fontFamily: {
    sans: ["Inter", ...defaultTheme.fontFamily.sans],
  },
  variants: {
    extend: {
      backgroundColor: ["checked"],
      borderColor: ["checked"],
      inset: ["checked"],
      zIndex: ["hover", "active"],
    },
  },
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
  future: {
    purgeLayersByDefault: true,
  },
};