const animate = require("tailwindcss-animate") import defaultTheme from "tailwindcss/defaultTheme"; import forms from "@tailwindcss/forms"; /** @type {import('tailwindcss').Config} */ export default { darkMode: ["class"], safelist: ["dark"], prefix: "", content: [ "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php", "./storage/framework/views/*.php", "./resources/views/**/*.blade.php", "./resources/js/**/*.{ts,tsx,vue}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { sans: ["Figtree", ...defaultTheme.fontFamily.sans], display: ["Dongle", "Poppins", "sans-serif"], }, borderRadius: { xl: "calc(var(--radius) + 4px)", lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, colors: { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", chart: { 1: "hsl(var(--chart-1))", 2: "hsl(var(--chart-2))", 3: "hsl(var(--chart-3))", 4: "hsl(var(--chart-4))", 5: "hsl(var(--chart-5))", }, white: { DEFAULT: "hsl(var(--white))", foreground: "hsl(var(--foreground))", 50: "hsl(var(--white-50))", 100: "hsl(var(--white-100))", 200: "hsl(var(--white-200))", 300: "hsl(var(--white-300))", 400: "hsl(var(--white-400))", 500: "hsl(var(--white-500))", 600: "hsl(var(--white-600))", 700: "hsl(var(--white-700))", 800: "hsl(var(--white-800))", 900: "hsl(var(--white-900))", 950: "hsl(var(--white-950))", }, gray: { DEFAULT: "hsl(var(--gray))", foreground: "hsl(var(--foreground))", 50: "hsl(var(--gray-50))", 100: "hsl(var(--gray-100))", 200: "hsl(var(--gray-200))", 300: "hsl(var(--gray-300))", 400: "hsl(var(--gray-400))", 500: "hsl(var(--gray-500))", 600: "hsl(var(--gray-600))", 700: "hsl(var(--gray-700))", 800: "hsl(var(--gray-800))", 900: "hsl(var(--gray-900))", 950: "hsl(var(--gray-950))", }, green: { DEFAULT: "hsl(var(--green-300))", foreground: "hsl(var(--foreground))", 50: "hsl(var(--green-50))", 100: "hsl(var(--green-100))", 200: "hsl(var(--green-200))", 300: "hsl(var(--green-300))", 400: "hsl(var(--green-400))", 500: "hsl(var(--green-500))", 600: "hsl(var(--green-600))", 700: "hsl(var(--green-700))", 800: "hsl(var(--green-800))", 900: "hsl(var(--green-900))", 950: "hsl(var(--green-950))", }, "dark-green": { DEFAULT: "hsl(var(--dark-green))", foreground: "hsl(var(--foreground))", 50: "hsl(var(--dark-green-50))", 100: "hsl(var(--dark-green-100))", 200: "hsl(var(--dark-green-200))", 300: "hsl(var(--dark-green-300))", 400: "hsl(var(--dark-green-400))", 500: "hsl(var(--dark-green-500))", 600: "hsl(var(--dark-green-600))", 700: "hsl(var(--dark-green-700))", 800: "hsl(var(--dark-green-800))", 900: "hsl(var(--dark-green-900))", 950: "hsl(var(--dark-green-950))", }, }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, "collapsible-down": { from: { height: 0 }, to: { height: "var(--radix-collapsible-content-height)" }, }, "collapsible-up": { from: { height: "var(--radix-collapsible-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "collapsible-down": "collapsible-down 0.2s ease-in-out", "collapsible-up": "collapsible-up 0.2s ease-in-out", }, }, }, plugins: [forms, animate], };