round-timing/tailwind.config.js at staging · rousseau-romain/round-timing · 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
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './**/*.templ',
  ],
  darkMode: 'class',
  // Safelist for dynamic classes generated at runtime (e.g., team colors)
  safelist: [
    // Team background colors
    { pattern: /bg-(red|blue|green|yellow|purple|pink|orange|cyan|indigo|teal)-(50|100|200|300|400|500)/ },
    // Team background colors (dark mode)
    { pattern: /bg-(red|blue|green|yellow|purple|pink|orange|cyan|indigo|teal)-(800|900)/, variants: ['dark'] },
    // Team text colors
    { pattern: /text-(red|blue|green|yellow|purple|pink|orange|cyan|indigo|teal)-(500|600|700|800)/ },
    // Team border colors
    { pattern: /border-(red|blue|green|yellow|purple|pink|orange|cyan|indigo|teal)-(200|300|400|500)/ },
    // Team border colors (dark mode)
    { pattern: /border-(red|blue|green|yellow|purple|pink|orange|cyan|indigo|teal)-(700|800)/, variants: ['dark'] },
  ],
  theme: {
    extend: {
      colors: {
        // Custom semantic colors can be added here
        // primary: colors.sky,
        // success: colors.green,
        // danger: colors.red,
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
  corePlugins: {
    preflight: true,
  }
}