/** @type {import('tailwindcss').Config} */ const tailwindForms = require("@tailwindcss/forms"); const tailwindScrollbars = require("tailwind-scrollbar"); module.exports = { darkMode: "class", content: [ "./src/pages/**/*.{js,ts,jsx,tsx}", "./src/components/**/*.{js,ts,jsx,tsx}", "./src/widgets/**/*.{js,ts,jsx,tsx}", ], variants: { extend: { display: ["group-hover"], }, }, theme: { extend: { colors: { theme: { 50: "rgb(var(--color-50) / )", 100: "rgb(var(--color-100) / )", 200: "rgb(var(--color-200) / )", 300: "rgb(var(--color-300) / )", 400: "rgb(var(--color-400) / )", 500: "rgb(var(--color-500) / )", 600: "rgb(var(--color-600) / )", 700: "rgb(var(--color-700) / )", 800: "rgb(var(--color-800) / )", 900: "rgb(var(--color-900) / )", }, }, screens: { '3xl': '1800px', // => @media (min-width: 1800px) { ... } }, }, }, plugins: [tailwindForms, tailwindScrollbars], // always include these in build as classes are dynamically constructed safelist: [ 'backdrop-blur', 'backdrop-blur-sm', 'backdrop-blur-md', 'backdrop-blur-xl', 'backdrop-saturate-0', 'backdrop-saturate-50', 'backdrop-saturate-100', 'backdrop-saturate-150', 'backdrop-saturate-200', 'backdrop-brightness-0', 'backdrop-brightness-50', 'backdrop-brightness-75', 'backdrop-brightness-90', 'backdrop-brightness-95', 'backdrop-brightness-100', 'backdrop-brightness-105', 'backdrop-brightness-110', 'backdrop-brightness-125', 'backdrop-brightness-150', 'backdrop-brightness-200', 'grid-cols-1', 'md:grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-1', 'lg:grid-cols-2', 'lg:grid-cols-3', 'lg:grid-cols-4', 'lg:grid-cols-5', 'lg:grid-cols-6', 'lg:grid-cols-7', 'lg:grid-cols-8', // for status 'bg-white', 'bg-black', 'dark:bg-white', 'bg-orange-400', 'dark:bg-orange-400', ], }