shyk/tailwind.config.js at devel · Sprudeel/shyk · 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
const defaultTheme = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./resources/js/**/*.vue",
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
        "./node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/**/*.{js,vue}",
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ["Poppins", ...defaultTheme.fontFamily.sans],
            },
            fontSize: {
                "2xs": ".5rem",
            },
            animation: {
                flash: "flash 1s forwards 3s",
            },
            keyframes: (theme) => ({
                flash: {
                    "20%": { transform: "translateX(-10%)" },
                    "60%": { transform: "translateX(200%)" },
                    "90%": { opacity: 0 },
                    "100%": { transform: "translateX(0%)", opacity: 0 },
                },
            }),
        },
        screens: {
            ph: "320px",
            lph: "495px",
            sm: "640px",
            md: "768px",
            lg: "1024px",
            xl: "1440px",
            "2xl": "1536px",
            "o-ph": [{ min: "320px", max: "494px" }],
            "o-lph": [{ min: "495px", max: "639px" }],
            "o-sm": [{ min: "640px", max: "767px" }],
            "o-md": [{ min: "768px", max: "1023px" }],
            "o-lg": [{ min: "1024px", max: "1439px" }],
            "o-xl": [{ min: "1440px", max: "1535px" }],
            "o-2xl": [{ min: "1536px" }],
        },
        container: {
            center: true,
        },
        backgroundImage: {
            authbg: "url('@/Components/svg/bg/AuthBG.svg')",
        },
    },

    plugins: [require("@tailwindcss/forms"), require("tailwindcss")],
};