FramedJustForYou/tailwind.config.js at main · SethSharp/FramedJustForYou · 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
import defaultTheme from 'tailwindcss/defaultTheme'
import forms from '@tailwindcss/forms'
import colors from 'tailwindcss/colors.js'

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    safelist: [
        'grid-cols-1',
        'grid-cols-2',
        'grid-cols-3',
        'grid-cols-4',
        'grid-cols-5',
        'grid-cols-6',

        //md
        'md:grid-cols-3',
        'md:grid-cols-4',
        'md:grid-cols-5',
        'md:grid-cols-6',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
                mont: ['Montserrat', ...defaultTheme.fontFamily.sans],
            },
            fontSize: {
                // Typography Scale (documentation only - use standard Tailwind classes)
                // Hero: text-3xl sm:text-5xl md:text-6xl
                // Section: text-lg md:text-2xl
                // Subsection: text-md md:text-xl
            },
            colors: {
                primary: {
                    50: colors.pink[50],
                    100: colors.pink[100],
                    200: colors.pink[200],
                    300: colors.pink[300],
                    400: colors.pink[400],
                    500: colors.pink[500],
                    600: colors.pink[600],
                    700: colors.pink[700],
                    800: colors.pink[800],
                    900: colors.pink[900],
                },
                secondary: {
                    50: colors.stone[50],
                    100: colors.stone[100],
                    200: colors.stone[200],
                    300: colors.stone[300],
                    400: colors.stone[400],
                    500: colors.stone[500],
                    600: colors.stone[600],
                    700: colors.stone[700],
                    800: colors.stone[800],
                    900: colors.stone[900],
                },
                accent: {
                    50: colors.yellow[50],
                    100: colors.yellow[100],
                    200: colors.yellow[200],
                    300: colors.yellow[300],
                    400: colors.yellow[400],
                    500: colors.yellow[500],
                    600: colors.yellow[600],
                    700: colors.yellow[700],
                    800: colors.yellow[800],
                    900: colors.yellow[900],
                },
                relay: {
                    DEFAULT: colors.yellow[500],
                    hover: colors.purple[600],
                    text: '#0f1e64',
                },
                seasonal: {
                    christmas: colors.green[700],
                },
            },
        },
    },

    plugins: [forms],
}