escaity.github.io/tailwind.config.js at main · Escaity/escaity.github.io · 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
/** @type {import('tailwindcss').Config} */

function withOpacity(variableName) {
  return ({ opacityValue }) => {
    if (opacityValue !== undefined) {
      return `rgba(var(${variableName}), ${opacityValue})`;
    }
    return `rgb(var(${variableName}))`;
  };
}

export default {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  darkmode: "class",
  theme: {
    screens: {
      sm: "600px",
      // => @media (min-width: 640px) { ... }

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

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

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

      "2xl": "1080px",
      // => @media (min-width: 1536px) { ... }
    },
    container: {
      center: true,
    },
    textColor: {
      skin: {
        base: withOpacity("--color-text"),
        active: withOpacity("--color-text-active"),
        accent: withOpacity("--color-text-accent"),
      },
    },

    backgroundColor: {
      skin: {
        active: withOpacity("--color-active"),
        accent: withOpacity("--color-accent"),
        fill: withOpacity("--color-fill"),
        secondary: withOpacity("--color-fill-secondary"),
        card: withOpacity("--color-card"),
        modal: withOpacity("--color-modal"),
      },
    },
    textDecorationColor: {
      skin: {
        base: withOpacity("--color-border"),
        active: withOpacity("--color-text-active"),
      },
    },
    borderColor: {
      skin: {
        normal: withOpacity("--color-text"),
        base: withOpacity("--color-border"),
      },
    },
    extend: {
      colors: {
        custom: {
          title: "#555",
          subtitle: "#999",
          hover: "#e0a419",
          active: "#ff7f50",
          accent: "#77aeff",
          grey: "#f6f6f6",
          nav: "#ded6d8",
          primary: "#edede9",
          second: "#d6ccc2",
          third: "#f5ebe0",
          forth: "#e3d5ca",
          fifth: "#d5bdaf",
        },
      },
    },
  },
  plugins: [],
};