OdysseyComponents/tailwind.config.js at main · jmkcoder/OdysseyComponents · 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} */
module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.ts',
    './src/**/*.js',
    './src/**/*.tsx',
    './src/**/*.jsx',
  ],
  theme: {
    extend: {
      // Custom width values
      width: {
        '50': '50px',
        '100': '100px',
        '150': '150px',
        '200': '200px',
        '250': '250px',
        '300': '300px',
        '400': '400px',
        '500': '500px',
      },
      // Custom height values
      height: {
        '50': '50px',
        '100': '100px',
        '150': '150px',
        '200': '200px',
        '250': '250px',
        '300': '300px',
        '400': '400px',
        '500': '500px',
      },
      // Custom spacing (margin, padding)
      spacing: {
        '50': '50px',
        '100': '100px',
        '150': '150px',
        '200': '200px',
      },
      // Custom flex values
      flex: {
        '2': '2 2 0%',
        '3': '3 3 0%',
        '4': '4 4 0%',
      },
    },
  },
  plugins: [],
  // Safelist ensures these classes are generated even if not detected in content files
  safelist: [
    // Width utilities
    { pattern: /^w-/ },
    // Height utilities
    { pattern: /^h-/ },
    // Padding utilities
    { pattern: /^p-/ },
    { pattern: /^px-/ },
    { pattern: /^py-/ },
    { pattern: /^pt-/ },
    { pattern: /^pr-/ },
    { pattern: /^pb-/ },
    { pattern: /^pl-/ },
    // Margin utilities
    { pattern: /^m-/ },
    { pattern: /^mx-/ },
    { pattern: /^my-/ },
    { pattern: /^mt-/ },
    { pattern: /^mr-/ },
    { pattern: /^mb-/ },
    { pattern: /^ml-/ },
    // Flex utilities
    { pattern: /^flex-/ },
    // Grid utilities
    { pattern: /^grid-/ },
    // Gap utilities
    { pattern: /^gap-/ },
    // Border utilities
    { pattern: /^border/ },
    // Background utilities
    { pattern: /^bg-/ },
    // Text utilities
    { pattern: /^text-/ },
  ],
}