geojson.io/tailwind.config.js at main · mapbox/geojson.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
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
// eslint-disable-next-line
const colors = require('tailwindcss/colors');
// eslint-disable-next-line
const plugin = require('tailwindcss/plugin');
// eslint-disable-next-line
const postcss = require('postcss');

module.exports = {
  jit: 'enable',
  content: ['./{components,app,pages}/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    data: {
      'state-checked': 'state="checked"',
      'state-active': 'state="active"',
      'state-on': 'state="on"',
      'state-open': 'state="open"'
    },
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
      mono: ['Source Code Pro', 'monospace']
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.neutral,
      purple: colors.purple,
      yellow: colors.yellow,
      red: colors.red
    },
    extend: {
      keyframes: {
        appear: {
          '0%': { opacity: 0 },
          '100%': { opacity: 1 }
        }
      },
      colors: {
        'mb-purple': {
          500: '#9c67e7',
          700: '#0f38bf'
        },
        'mb-blue': {
          300: '#3195ff',
          500: '#007afc',
          700: '#0060c7',
          900: '#004691'
        },
        'mb-green': {
          500: '#2fc078'
        },
        'mb-orange': {
          500: '#ff9b31'
        },
        'mb-gray-dark': '#0e2127'
      },
      fontFamily: {
        sans: ['"Open Sans"', 'sans-serif']
      }
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    plugin(({ addVariant, e }) => {
      function addPointerVariant(ruleName, params) {
        addVariant(ruleName, ({ container, separator }) => {
          const pointerRule = postcss.atRule({
            name: 'media',
            params
          });
          pointerRule.append(container.nodes);
          container.append(pointerRule);
          pointerRule.walkRules((rule) => {
            rule.selector = `.${e(
              `${ruleName}${separator}${rule.selector.slice(1)}`
            )}`;
          });
        });
      }
      addPointerVariant('pointer-coarse', '(pointer: coarse');
      addPointerVariant('pointer-fine', '(pointer: fine');
      addPointerVariant('pointer-none', '(pointer: none');
      addVariant('hover-hover', ({ container, separator }) => {
        const hoverHover = postcss.atRule({
          name: 'media',
          params: '(hover: hover)'
        });
        hoverHover.append(container.nodes);
        container.append(hoverHover);
        hoverHover.walkRules((rule) => {
          rule.selector = `.${e(
            `hover-hover${separator}${rule.selector.slice(1)}`
          )}`;
        });
      });
      addVariant('hover-none', ({ container, separator }) => {
        const hoverNone = postcss.atRule({
          name: 'media',
          params: '(hover: none)'
        });
        hoverNone.append(container.nodes);
        container.append(hoverNone);
        hoverNone.walkRules((rule) => {
          rule.selector = `.${e(
            `hover-none${separator}${rule.selector.slice(1)}`
          )}`;
        });
      });
    })
  ]
};