task-board-react/tailwind.config.ts at main · ChuthamatDev/task-board-react · 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
import type { Config } from 'tailwindcss'
import scrollbar from 'tailwind-scrollbar'

export default {
    darkMode: 'class',
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
            },
            fontSize: {
                h1: [
                    '3rem',
                    {
                        lineHeight: '1.2',
                        letterSpacing: '-0.5px',
                        fontWeight: '600',
                    },
                ],
                h2: ['2.25rem', { lineHeight: '1.2', fontWeight: '600' }],
                h3: ['1.875rem', { lineHeight: '1.2', fontWeight: '400' }],
                h4: ['1.5rem', { lineHeight: '1.5', fontWeight: '600' }],
                h5: ['1.25rem', { lineHeight: '1.5', fontWeight: '600' }],
                h6: ['1.125rem', { lineHeight: '1.2', fontWeight: '600' }],
                subtitle1: [
                    '1.125rem',
                    { lineHeight: '1.5', fontWeight: '400' },
                ],
                subtitle2: [
                    '0.875rem',
                    { lineHeight: '1.57', fontWeight: '500' },
                ],
            },
            boxShadow: {
                base: 'var(--shadow-base)',
            },
            colors: {
                app: {
                    bg: 'var(--color-bg)',
                    surface: 'var(--color-surface)',
                    card: 'var(--color-card)',
                    column: 'var(--color-column)',
                    border: 'var(--color-border)',

                    text: 'var(--color-text)',
                    subtle: 'var(--color-subtle-text)',

                    primary: 'var(--color-accent)',
                    'primary-hover': 'var(--color-accent-hover)',
                    'primary-fg': 'var(--color-accent-text)',

                    danger: 'var(--color-danger)',
                    'danger-hover': 'var(--color-danger-hover)',
                },
            },
        },
    },

    plugins: [scrollbar({ nocompatible: true })],
} satisfies Config