next-toko/tailwind.config.js at master · arisris/next-toko · 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
// @ts-nocheck
const screenSize = require("./lib/screen-size");
const konstaConfig = require("konsta/config");
const colors = require("./lib/colors");
const getColors = (prefix) => {
  const out = {};
  Object.keys(colors).forEach((i) => {
    if (i.startsWith(prefix)) {
      let name = i.split(prefix)[1];
      out[name] = colors[i];
    }
  });
  return out;
};

/** @type {import("tailwindcss").Config} */
const tailwindConfig = {
  darkMode: "class",
  theme: {
    fontFamily: {
      rubik: ["Rubik", "Arial", "Helvetica", "sans-serif"]
    },
    screens: Object.entries(screenSize).reduce(
      (a, [k, v]) => ((a[k] = `${v}px`), a),
      {}
    ),
    container: {
      padding: {
        lg: "3rem",
        xl: "4rem",
        "2xl": "5rem"
      }
    },
    colors: {
      green: getColors("green-"),
      gray: getColors("grey-"),
      purple: getColors("purple-"),
      blue: getColors("blue-"),
      primary: {
        DEFAULT: colors["green-500"],
        light: colors["green-400"],
        dark: colors["green-700"]
      }
    }
  },
  content: [
    "./lib/**/*.(ts|tsx)",
    "./components/**/*.(ts|tsx)",
    "./pages/**/*.(ts|tsx)",
    "./layouts/**/*.(ts|tsx)",
    "./hooks/**/*.(ts|tsx)"
  ],
  variants: {
    typography: ["dark"]
  },
  plugins: [require("./styles/plugins/scrollbar")]
};

module.exports = konstaConfig(tailwindConfig);