grade-lms/tailwind.config.ts at master · aihara-sama/grade-lms · 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
import { readFileSync } from "fs";
import postcss from "postcss";
import postcssJs from "postcss-js";
import plugin from "tailwindcss/plugin";

import type { Config } from "tailwindcss";

// Editor sugestions for custom css classes
require.extensions[".css"] = function (module, filename) {
  module.exports = plugin(({ addBase, addComponents, addUtilities }) => {
    const css = readFileSync(filename, "utf8");
    const root = postcss.parse(css);
    const jss = postcssJs.objectify(root);

    if ("@layer base" in jss) {
      addBase(jss["@layer base"]);
    }
    if ("@layer components" in jss) {
      addComponents(jss["@layer components"]);
    }
    if ("@layer utilities" in jss) {
      addUtilities(jss["@layer utilities"]);
    }
  });
};

const config: Config = {
  content: ["./app/**/*.tsx", "./components/**/*.tsx"],
  theme: {
    extend: {
      keyframes: {
        timeoutLine: {
          "0%": { width: "100%" },
          "100%": { width: "0%" },
        },
      },
      animation: {
        "timeout-line": "timeoutLine linear forwards",
      },
      colors: {
        primary: "#555555",
        link: "#1C92FF",
        light: "#8a8a8a",
        white: "#fff",
        black: "#000",
        divider: "#d9d9d936",
        transparent: "#ffffff00",
        mask: "#00000061",

        amber: {
          500: "#fbbf24",
          520: "#f2b311",
          550: "#d89c00",
        },

        blue: {
          100: "#3D9BF1",
          200: "#3194ee",
          300: "#0e7fe7",
        },
        dark: {
          "100": "#00000029",
          "200": "#00000069",
        },
        gray: {
          100: "#f6f6f6",
          200: "#e9e9e9",
          500: "#d9d9d9",
        },
      },
      transitionProperty: {
        fade: "visibility, transform, opacity",
      },
      screens: {
        "sm-h": { raw: "(min-height: 500px)" },
        sm: "640px",
        // => @media (min-width: 640px) { ... }

        md: "768px",
        // => @media (min-width: 768px) { ... }

        big: "910px",
        // => @media (min-width: 910px) { ... }

        lg: "1024px",
        // => @media (min-width: 1024px) { ... }

        xl: "1280px",
        // => @media (min-width: 1280px) { ... }

        "2xl": "1536px",
        // => @media (min-width: 1536px) { ... }
      },
    },
  },
  // eslint-disable-next-line
  plugins: [require("./styles/globals.css")],
};
export default config;