Ecomsys-Classic-theme/tailwind.config.js at main · ecomsys/Ecomsys-Classic-theme · 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
/*
// container — центрирование и отступы по брейкпоинтам.
// colors — два базовых цвета (можешь расширить).
// spacing — базовые спейсы для margin/padding.
// fontFamily — heading и body.
// fontSize — два основных размера: title и text.
// screens — стандартные Tailwind брейкпоинты.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./**/*.php",
        "./assets/src/**/*.{js,ts,jsx,tsx,php}",
    ],
    theme: {
        container: {
            center: true,
            padding: {
                DEFAULT: '10px',
                sm: '15px',
                lg: '30px',
                xl: '100px',
                '2xl': '150px',
            },
            center: true, // по центру страницы
        },
        extend: {
            screens: {
                sm: '640px',
                md: '768px',
                lg: '1024px',
                xl: '1280px',
                '2xl': '1536px',
            },
            colors: {
                primary: '#1E3A8A', // пример синий
                secondary: '#F59E0B', // пример оранжевый
            },
            spacing: {
                '1': '4px',
                '2': '8px',
                '3': '12px',
                '4': '16px',
                '5': '20px',
                '6': '24px',
                '8': '32px',
                '10': '40px',
                '12': '48px',
                '16': '64px',
                '20': '80px',
            },
            fontFamily: {
                heading: ['Montserrat', 'sans-serif'],
                body: ['Roboto', 'sans-serif'],
            },
            fontSize: {
                'h1': ['48px', { lineHeight: '120%', fontWeight: '700' }],
                'h2': ['32px', { lineHeight: '120%', fontWeight: '700' }],
                'h3': ['24px', { lineHeight: '120%', fontWeight: '700' }],
                'h4': ['20px', { lineHeight: '120%', fontWeight: '700' }],
                'h5': ['18px', { lineHeight: '120%', fontWeight: '700' }],
                'h6': ['16px', { lineHeight: '120%', fontWeight: '700' }],
                'use': ['16px', { lineHeight: '150%', fontWeight: '400' }],
            }
        },
    },
    plugins: [],
};