app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Nunito");

// Variables
@import "variables";
@import "keyframes";
@import "animations";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

body {
    touch-action: manipulation;
}

.navbar-laravel {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

* {
    -webkit-font-smoothing: antialiased;
    -webkit-touch-callout: none;
}

.hide-scrollbar {
    &::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 0;
        height: 0;
    }
}

.spin {
    animation: 1s spin infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@import "./tailwind/tailwind.css";

tailwind.config.js

module.exports = {
    important: false,
    theme: {
        fontFamily: {
            display: ["covik-sans", "sans-serif"],
            serif: ["ITC Clearface W01", "serif"],
            sans: ["work-sans", "sans-serif"]
        },
        fontSize: {
            "3xs": ".575rem",
            "2xs": ".675rem",
            xs: ".875rem",
            sm: "1rem",
            base: "1.125rem",
            md: "1.25rem",
            lg: "1.5rem",
            xl: "1.875rem",
            "2xl": "2rem",
            "3xl": "2.5rem",
            "4xl": "2.8125rem",
            "5xl": "3.125rem",
            "8xl": "5.25rem"
        },
        extend: {
            maxWidth: {
                "2xs": "12rem",
                base: "35rem",
                "40rem": "40rem"
            },
            minWidth: {
                "84": "20.125rem",
                md: "33rem",
                "24rem": "24rem"
            },
            minHeight: {
                "20rem": "20rem"
            },
            width: {
                "25rem": "25rem",
                "80vw": "80vw"
            },
            colors: {
                black: "#2F2F2F",
                current: "currentColor",
                categoryColor: "var(--categoryColor)",
                accent: "var(--accentColor)",
                orange: "#F0A38C",
                green: "#C6D6BD",
                blue: "#C9D9E0",
                purple: "#C6C1CE",
                tan: {
                    50: "#FAF5F0",
                    100: "#F0EBE6",
                    200: "#D8C6BF",
                    300: "#F0CFB4"
                }
            },
            spacing: {
                "1px": "1px",
                "2px": "2px",
                "72": "17rem",
                "84": "20.125rem",
                "96": "24rem",
                "30vh": "30vh",
                "48vh": "48vh",
                "55vh": "55vh",
                "60vh": "60vh",
                "75vh": "75vh"
            }
        }
    },
    variants: {
        opacity: ["responsive", "hover", "focus", "group-active"]
    },
    plugins: [
        require("tailwindcss-interaction-variants"),
        require("tailwindcss-grid")({
            grids: [2, 3, 5, 6, 8, 10, 12],
            gaps: {
                0: "0",
                4: "1rem",
                8: "2rem",
                "4-x": "1rem",
                "4-y": "1rem"
            },
            autoMinWidths: {
                "16": "4rem",
                "24": "6rem",
                "300px": "300px"
            },
            variants: ["responsive"]
        })
    ]
};

tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

@responsive {
    .transition {
        transition: 300ms all ease;
    }

    .bottom-full {
        top: auto;
        bottom: 100%;
    }

    .top-full {
        bottom: auto;
        top: 100%;
    }

    .flex-center {
        @apply flex items-center justify-center;
    }

    .right-full {
        right: 100%;
    }
}

@variants active {
    .shrink-1 {
        transform: scale(0.9);
    }
}

.pointer-events-none {
    pointer-events: none;
}

@tailwind screens;

webpack.mix.js

const mix = require("laravel-mix");
const tailwindcss = require("tailwindcss");

let path = require("path");

require("laravel-mix-svg");

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.svg({
    assets: ["./resources/svg/"], // a list of directories to search svg images
    output: "./resources/js/svg.js"
});

mix.js("resources/js/app.js", "public/js")
    .version()
    .sass("resources/sass/app.scss", "public/css")
    .options({
        processCssUrls: false,
        postCss: [tailwindcss("./tailwind.config.js")]
    })
    .version()
    .webpackConfig({
        output: {
            chunkFilename: "js/[name].js?id=[chunkhash]"
        },
        resolve: {
            modules: [
                "node_modules",
                path.resolve(__dirname, "resources/js"),
                path.resolve(__dirname, "resources/svg")
            ]
        }
    });