ericjinks.com/tailwind.config.js at main · Jinksi/ericjinks.com · 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // Only process React components and MDX files (selective approach)
    './src/components/react/**/*.{js,jsx,ts,tsx}',
    './src/content/**/*.mdx',
  ],
  darkMode: 'media', // Use prefers-color-scheme to match existing implementation
  theme: {
    extend: {
      // Map CSS custom properties to Tailwind theme
      colors: {
        // Semantic colors that change with theme
        'text': 'var(--color-text)',
        'background': 'var(--color-background)',
        'light-grey': 'var(--color-lightGrey)',
        'highlight': 'var(--color-highlight)',
        'highlight-semi': 'var(--color-highlight-semi-transparent)',
        'highlight-almost': 'var(--color-highlight-almost-transparent)',
        'highlight-b': 'var(--color-highlightB)',
        'highlight-c': 'var(--color-highlightC)',
        'code': 'var(--color-code)',

        // Static colors
        'green': 'var(--green)',
        'green-semi': 'var(--green-semi-transparent)',
        'green-almost': 'var(--green-almost-transparent)',
        'white': 'var(--white)',
        'off-white': 'var(--offWhite)',
        'red': 'var(--red)',
        'orange': 'var(--orange)',
        'cyan': 'var(--cyan)',
        'black': 'var(--black)',
        'black-transparent': 'var(--blackTransparent)',
        'light-grey-static': 'var(--lightGrey)',
        'light-black': 'var(--lightBlack)',
      },
      fontFamily: {
        'code': 'var(--font-code)',
        'system': 'var(--font-system)',
        'sans': 'var(--font-system)', // Make system font the default sans
      },
      // Match existing spacing patterns from global.scss
      spacing: {
        '0.5em': '0.5em',
        '1em': '1em',
        '2.5': '2.5rem',
        '7': '7rem',
        '10': '10rem',
        '15': '15rem',
      },
      // Match existing container max-widths
      maxWidth: {
        'container': '1111px',
        'text': '700px',
      },
      // Match existing box shadow patterns
      boxShadow: {
        'code': '0 2px 3px rgba(0, 0, 0, 0.3)',
        'blockquote': '0 2px 3px rgba(0, 0, 0, 0.1)',
      },
      // Typography scale to match existing headings
      fontSize: {
        'h2': '1.5em',
        'h3': '1.17em',
        'h4': '1em',
        'code': '0.9em',
        'caption': '0.8em',
      },
      // Container utilities
      width: {
        '90vw': '90vw',
      },
    },
  },
  plugins: [
    // Add custom utilities for React components
    function({ addUtilities }) {
      const newUtilities = {
        // Button styles matching global.scss patterns
        '.btn-base': {
          appearance: 'none',
          backgroundColor: 'var(--color-text)',
          color: 'var(--color-background)',
          padding: '0rem 1rem',
          textTransform: 'uppercase',
          textDecoration: 'none',
          '&:hover, &:focus': {
            color: 'var(--color-background)',
            opacity: '0.9',
          }
        },
        '.btn-outlined': {
          backgroundColor: 'var(--color-background)',
          color: 'var(--color-text)',
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '1rem 2rem',
          margin: '1rem auto',
          border: '1px solid currentColor',
          cursor: 'pointer',
          textAlign: 'center',
          textDecoration: 'none',
          transition: 'all 0.15s ease',
          '&:hover, &:focus': {
            backgroundColor: 'var(--color-text)',
            color: 'var(--color-background)',
          }
        },
        // Container utilities matching global.scss
        '.container-site': {
          margin: '0 auto',
          maxWidth: '1111px',
          width: '90vw',
        },
        '.container-text': {
          maxWidth: '700px',
          width: '100%',
          '&.auto': {
            marginLeft: 'auto',
            marginRight: 'auto',
          }
        },
      }
      addUtilities(newUtilities)
    }
  ],
}