moonshine

1
const plugin = require('tailwindcss/plugin')
2

3
const vendorSafeList = [
4
  {
5
    // usage: column.blade.php
6
    pattern: /col-span-\d/,
7
    variants: isDevelopment() ? ['xl'] : ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
8
  },
9
  {
10
    // usage: icons
11
    pattern: /text-(pink|purple)/,
12
    variants: isDevelopment() ? [] : ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
13
  },
14
  {
15
    // usage: flex align items
16
    pattern: /items-(start|end|center|baseline|stretch)/,
17
  },
18
  {
19
    // usage: flex justify content
20
    pattern: /justify-(normal|start|end|center|between|around|evenly|stretch)/,
21
  },
22
  {
23
    // usage: icons
24
    pattern: /(w-|h-)[1-9]/,
25
  },
26
]
27
const clientSafeList = [
28
  'visible',
29
  'pointer-events-auto',
30
  'opacity-0',
31
  'opacity-100',
32
  {
33
    pattern: /text-dark-\d/,
34
    variants: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
35
  },
36
  {
37
    pattern: /gap(-x|-y)-\d/,
38
    variants: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
39
  },
40
  {
41
    pattern: /space(-x|-y)-\d/,
42
    variants: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
43
  },
44
]
45

46
/** @type {import('tailwindcss').Config} */
47
export default {
48
  content: ['./resources/js/**/*.js', './resources/views/**/*.blade.php'],
49
  safelist: isDevelopment() ? vendorSafeList : [...vendorSafeList, ...clientSafeList],
50
  darkMode: 'class',
51
  theme: {
52
    screens: {
53
      xs: '375px',
54
      sm: '640px',
55
      md: '768px',
56
      lg: '1024px',
57
      xl: '1280px',
58
      '2xl': '1536px',
59
      'mobile': {'max': '1023px'},
60
    },
61
    container: {
62
      center: true,
63
      padding: '20px',
64
    },
65
    fontFamily: {
66
      sans: ['Gilroy', 'sans-serif'],
67
    },
68
    fontSize: {
69
      '3xs': ['0.875rem', '1.5em'],
70
      '2xs': ['0.9375rem', '1.5em'],
71
      xs: ['1rem', '1.5em'],
72
      sm: ['1.125rem', '1.5em'],
73
      md: ['1.25rem', '1.5em'],
74
      lg: ['1.625rem', '1.5em'],
75
      xl: ['2rem', '1.25em'],
76
      '2xl': ['3rem', '1.175em'],
77
      '3xl': ['4rem', '1.175em'],
78
    },
79
    extend: {
80
      colors: {
81
        primary: {
82
          DEFAULT: 'rgba(var(--primary), <alpha-value>)',
83
        },
84
        secondary: {
85
          DEFAULT: 'rgba(var(--secondary), <alpha-value>)',
86
        },
87
        body: 'rgba(var(--body), <alpha-value>)',
88
        dark: {
89
          DEFAULT: 'rgba(var(--dark-DEFAULT), <alpha-value>)',
90
          50: 'rgba(var(--dark-50), <alpha-value>)',
91
          100: 'rgba(var(--dark-100), <alpha-value>)',
92
          200: 'rgba(var(--dark-200), <alpha-value>)',
93
          300: 'rgba(var(--dark-300), <alpha-value>)',
94
          400: 'rgba(var(--dark-400), <alpha-value>)',
95
          500: 'rgba(var(--dark-500), <alpha-value>)',
96
          600: 'rgba(var(--dark-600), <alpha-value>)',
97
          700: 'rgba(var(--dark-700), <alpha-value>)',
98
          800: 'rgba(var(--dark-800), <alpha-value>)',
99
          900: 'rgba(var(--dark-900), <alpha-value>)',
100
        },
101
        info: {
102
          bg: 'rgba(var(--info-bg), <alpha-value>)',
103
          text: 'rgba(var(--info-text), <alpha-value>)',
104
        },
105
        success: {
106
          bg: 'rgba(var(--success-bg), <alpha-value>)',
107
          text: 'rgba(var(--success-text), <alpha-value>)',
108
        },
109
        warning: {
110
          bg: 'rgba(var(--warning-bg), <alpha-value>)',
111
          text: 'rgba(var(--warning-text), <alpha-value>)',
112
        },
113
        error: {
114
          bg: 'rgba(var(--error-bg), <alpha-value>)',
115
          text: 'rgba(var(--error-text), <alpha-value>)',
116
        },
117
        menu: {
118
          link: 'rgba(var(--menu-link-color, 255, 255, 255), <alpha-value>)',
119
          hover: 'rgba(var(--menu-hover-color, var(--secondary)), <alpha-value>)',
120
          active: {
121
            bg: 'rgba(var(--menu-active-bg, var(--primary)), <alpha-value>)',
122
            color: 'rgba(var(--menu-active-color, 255, 255, 255), <alpha-value>)',
123
          },
124
          current: {
125
            bg: 'rgba(var(--menu-current-bg, 248, 250, 252), <alpha-value>)',
126
            color: 'rgba(var(--menu-current-color, 0, 0, 0), <alpha-value>)',
127
          },
128
          dropdown: {
129
            bg: 'rgba(var(--menu-dropdown-bg, var(--dark-600)), <alpha-value>)',
130
          },
131
        },
132
      },
133
      borderWidth: {
134
        '3': '3px',
135
      },
136
      transitionProperty: {
137
        colors:
138
          'color, background-color, border-color, text-decoration-color, box-shadow, fill, stroke',
139
      },
140
      transitionDuration: {
141
        DEFAULT: '350ms',
142
      },
143
      zIndex: {
144
        '1': '1',
145
        '2': '2',
146
        '3': '3',
147
        '4': '4',
148
        '5': '5',
149
        modal: '1070',
150
        offcanvas: '1050',
151
        toast: '1500',
152
      },
153
      opacity: {
154
        '15': '.15',
155
      },
156
      keyframes: {
157
        wiggle: {
158
          '0%, 100%': {transform: 'rotate(-15deg)'},
159
          '50%': {transform: 'rotate(15deg)'},
160
        },
161
      },
162
      animation: {
163
        wiggle: 'wiggle 2.5s ease-in-out infinite',
164
      },
165
    },
166
  },
167
  variants: {
168
    extend: {},
169
  },
170
  plugins: [
171
    require('@tailwindcss/forms'),
172
    require('@tailwindcss/typography'),
173
    require('@tailwindcss/aspect-ratio'),
174
    plugin(function ({addVariant}) {
175
      addVariant('current', '&._is-active')
176
    }),
177
  ],
178
}
179

180
function isDevelopment() {
181
  return process.env.NODE_ENV === 'development'
182
}
183