STORYFORGE/tailwind.config.js at master · HieuNTg/STORYFORGE · 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
/**
 * tailwind.config.js — StoryForge Tailwind CSS configuration
 *
 * Scans web/**\/*.html and web/**\/*.js for class names.
 * Theme extensions mirror the design tokens defined in web/css/tokens.css
 * so Tailwind utility classes and CSS custom properties stay in sync.
 *
 * Plugin: @tailwindcss/typography — enables the `prose` class for story text.
 */

/** @type {import('tailwindcss').Config} */
module.exports = {
  // Class-based dark mode — the .dark class on <html> triggers dark: variants.
  // Toggled by the inline bootstrap script in index.html + Alpine store.
  darkMode: 'class',

  // Paths Tailwind scans to detect used class names for PurgeCSS/JIT tree-shaking.
  // Must cover every file that references Tailwind utilities — missing paths cause
  // classes to be purged in production builds.
  content: [
    'web/**/*.html',
    'web/**/*.js',
    // Include any Jinja/HTML templates served by FastAPI (if present)
    'templates/**/*.html',
    // Alpine.js x-bind / :class expressions inside inline scripts
    'web/**/*.ts',
  ],

  theme: {
    extend: {
      // ── Brand colours (mirrors --sf-color-brand-* tokens) ──────────────
      colors: {
        brand: {
          50:  '#EFF6FF',
          100: '#DBEAFE',
          200: '#BFDBFE',
          500: '#3B82F6',
          600: '#2563EB',
          700: '#1D4ED8',
          800: '#1E40AF',
        },
        surface: {
          50:  '#F8FAFC',
          100: '#F1F5F9',
          200: '#E2E8F0',
        },
        status: {
          success: '#16A34A',
          error:   '#DC2626',
          warning: '#F59E0B',
        },
      },

      // ── Font family (mirrors --sf-font-sans token) ──────────────────────
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },

      // ── Border radius (mirrors --sf-radius-* tokens) ────────────────────
      borderRadius: {
        sm:   '6px',
        md:   '8px',
        lg:   '12px',
        xl:   '16px',
        full: '9999px',
      },

      // ── Box shadow (mirrors --sf-shadow-* tokens) ───────────────────────
      boxShadow: {
        sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
        md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
        lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
      },

      // ── Transition duration (mirrors --sf-duration-* tokens) ─────────────
      transitionDuration: {
        fast: '150ms',
        base: '250ms',
        slow: '400ms',
      },
    },
  },

  plugins: [
    require('@tailwindcss/typography'),
  ],
}