RepoSift/tailwind.config.js at main · cyanChill/RepoSift · 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
import plugin from "tailwindcss/plugin";

module.exports = {
  content: [
    "./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))",
      },
      borderWidth: {
        1.5: "1.5px",
        3: "3px",
      },
      boxShadow: {
        full: "var(--bs-offset-x) var(--bs-offset-y) 0 0 var(--tw-shadow-color)",
      },
      colors: {
        bkg: "#e9e2db",
        error: "#ff2727",
        "p-green": { 400: "#a2d6a4", 600: "#6cae7b", 900: "#396f45" },
        turquoise: { 200: "#cefff9", 600: "#3cc7be" },
      },
      width: {
        appContent: "var(--max-app-width)",
      },
      maxWidth: {
        appContent: "var(--max-app-width)", // max-w-7xl: 1280px
        "appContent-1/2": "calc(var(--max-app-width)/2)",
        "appContent-1/3": "calc(var(--max-app-width)/3)",
      },
      padding: {
        xprose: "var(--dynamic-x-pad)",
      },
      zIndex: {
        modal: "var(--modal-z-index)",
        nav: "var(--nav-z-index)",
      },
      animation: {
        marqueeX: "marqueeX var(--marqueeX-anim-duration) linear infinite",
        rotate: "rotate var(--rotate-anim-duration) linear infinite",
      },
      keyframes: {
        marqueeX: {
          "0%": { transform: "translateX(100vw)" },
          "100%": { transform: "translateX(-100%)" },
        },
        rotate: {
          "0%": {
            transform: "rotate(0deg)",
            translate: "var(--tw-translate-x) var(--tw-translate-y)",
          },
          "100%": {
            transform: "rotate(360deg)",
            translate: "var(--tw-translate-x) var(--tw-translate-y)",
          },
        },
      },
    },
  },
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant("hocus", ["&:hover", "&:focus"]);
      addVariant("child", "& > *");
      addVariant("child-hover", "& > *:hover");
    }),
  ],
};