craft/tailwind.config.js at main · diginov/craft · 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
const defaultTheme = require('tailwindcss/defaultTheme');
const defaultColors = require('tailwindcss/colors');

/** @type {import('tailwindcss').Config} */
module.exports = {

    // https://tailwindcss.com/docs/content-configuration
    content: [
        './templates/**/*.twig',
        './sources/app/js/**/*.js',
    ],

    // https://tailwindcss.com/docs/theme
    theme: {

        extend: {

            // https://tailwindcss.com/docs/customizing-colors
            colors: {
                gray: defaultColors.neutral,
            },

            // https://tailwindcss.com/docs/font-family
            fontFamily: {
                sans: ['Roboto', ...defaultTheme.fontFamily.sans],
            },

            // https://tailwindcss.com/docs/plugins#typography
            typography: (theme) => ({
                DEFAULT: {
                    css: {
                        color: theme('colors.gray.900'),
                        strong: {
                            color: theme('colors.black'),
                            fontWeight: '700',
                        },
                        a: {
                            color: theme('colors.indigo.500'),
                            fontWeight: 'normal',
                            textDecoration: 'underline',
                            '&:hover': {
                                color: theme('colors.indigo.700'),
                                textDecoration: 'underline',
                            },
                        },
                    },
                },
            }),

        },

    },

    // https://tailwindcss.com/docs/plugins
    plugins: [

        // https://tailwindcss.com/docs/plugins#typography
        require('@tailwindcss/typography'),

        // https://tailwindcss.com/docs/plugins#forms
        require('@tailwindcss/forms'),

        // https://tailwindcss.com/docs/plugins#aspect-ratio
        require('@tailwindcss/aspect-ratio'),

        // https://tailwindcss.com/docs/plugins#container-queries
        require('@tailwindcss/container-queries'),

    ],

};