/** @type {import("tailwindcss").Config} */ const defaultTheme = require("tailwindcss/defaultTheme"); module.exports = { content: [ "./src/**/*.{js,ts,jsx,tsx}", "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}", ], darkMode: "class", theme: { transparent: "transparent", current: "currentColor", screens: { "xs": "300px", "xmd": "850px", "sm-h": { "raw": "(min-height: 700px)" }, "md-h": { "raw": "(min-height: 800px)" }, "lg-h": { "raw": "(min-height: 1000px)" }, ...defaultTheme.screens }, extend: { animation: { ripple: "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite", }, keyframes: { ripple: { "0%, 100%": { transform: "translate(-50%, -50%) scale(1)", }, "50%": { transform: "translate(-50%, -50%) scale(0.9)", }, }, }, typography: (theme) => ({ DEFAULT: { css: { color: theme('colors.gray.900'), // Change color as per your need a: { color: theme('colors.blue.500'), // Change color as per your need '&:hover': { color: theme('colors.blue.600'), // Change color as per your need }, }, 'h1,h2,h3,h4': { color: theme('colors.white'), // This is where you change your heading color }, 'b,strong': { color: theme('colors.gray.500'), // This is where you change your bold text color }, }, }, }), backgroundImage: { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', // Add bg-gradient-radial for radial gradients }, boxShadow: { "xs": "0px 0px 0px 0.75px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.05)", // light "tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)", "tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", "tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", // dark "dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)", "dark-tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", "dark-tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", "depth-1": "0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 0 0 0.75px rgba(0, 0, 0, 0.05), 0 0 12px -2px rgba(0, 0, 0, 0.05)", "depth-2": "0 0 0 0.75px rgba(0, 0, 0, 0.05), 0 8px 32px 0 rgba(39, 40, 51, 0.05), 0 4px 16px 0 rgba(39, 40, 51, 0.05)", "depth-3": "0 0 0 0.75px rgba(0, 0, 0, 0.05), 0 8px 32px 0 rgba(39, 40, 51, 0.05), 0 4px 16px 0 rgba(39, 40, 51, 0.05), 0 8px 24px -4px rgba(0, 0, 0, 0.20)" }, borderRadius: { "tremor-small": "0.375rem", "tremor-default": "0.5rem", "tremor-full": "9999px", }, fontSize: { "tremor-label": ["0.75rem"], "tremor-default": ["0.875rem", { lineHeight: "1.25rem" }], "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }], "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }], }, fontFamily: { inter: ["Inter", ...defaultTheme.fontFamily.sans] }, colors: { slate: { 1: "#FBFCFD", 2: "#F8F9FA", 3: "#F1F3F5", 4: "#ECEEF0", 5: "#E6E8EB", 6: "#DFE3E6", 7: "#D7DBDF", 8: "#C1C8CD", 9: "#889096", 10: "#7E868C", 11: "#687076", 12: "#11181C", }, // light mode tremor: { brand: { faint: "#eff6ff", // blue-50 muted: "#bfdbfe", // blue-200 subtle: "#60a5fa", // blue-400 DEFAULT: "#3b82f6", // blue-500 emphasis: "#1d4ed8", // blue-700 inverted: "#ffffff", // white }, background: { muted: "#f9fafb", // gray-50 subtle: "#f3f4f6", // gray-100 DEFAULT: "#ffffff", // white emphasis: "#374151", // gray-700 }, border: { DEFAULT: "#e5e7eb", // gray-200 }, ring: { DEFAULT: "#e5e7eb", // gray-200 }, content: { subtle: "#9ca3af", // gray-400 DEFAULT: "#6b7280", // gray-500 emphasis: "#374151", // gray-700 strong: "#111827", // gray-900 inverted: "#ffffff", // white }, }, // dark mode "dark-tremor": { brand: { faint: "#0B1229", // custom muted: "#172554", // blue-950 subtle: "#1e40af", // blue-800 DEFAULT: "#3b82f6", // blue-500 emphasis: "#60a5fa", // blue-400 inverted: "#030712", // gray-950 }, background: { muted: "#131A2B", // custom subtle: "#1f2937", // gray-800 DEFAULT: "#111827", // gray-900 emphasis: "#d1d5db", // gray-300 }, border: { DEFAULT: "#1f2937", // gray-800 }, ring: { DEFAULT: "#1f2937", // gray-800 }, content: { subtle: "#4b5563", // gray-600 DEFAULT: "#6b7280", // gray-600 emphasis: "#e5e7eb", // gray-200 strong: "#f9fafb", // gray-50 inverted: "#000000", // black }, }, blue: { base: { dark: "hsl(199, 89%, 48%)", light: "hsl(199, 89%, 48%)", }, hover: { dark: "hsl(199, 80%, 30%)", light: "hsl(199, 90%, 40%)", }, focusVisible: { dark: "hsl(208, 79%, 51%)", light: "hsl(208, 79%, 55%)", }, }, amber: { base: { dark: "hsl(39, 100%, 50%)", light: "hsl(45, 100%, 50%)", }, hover: { dark: "hsl(39, 100%, 40%)", light: "hsl(45, 100%, 45%)", }, focusVisible: { dark: "hsl(39, 85%, 30%)", light: "hsl(45, 85%, 35%)", } }, red: { base: { dark: "hsl(3, 100%, 61%)", light: "hsl(3, 100%, 59%)", }, hover: { dark: "hsl(3, 100% 45%)", light: "hsl(3, 100%, 40%)", }, focusVisible: { dark: "hsl(3, 85%, 40%)", light: "hsl(3, 85%, 35%)", } }, green: { base: { dark: "hsl(143, 71%, 45%)", light: "hsl(143, 71%, 40%)", }, hover: { dark: "hsl(143, 65%, 40%)", light: "hsl(143, 71%, 33%)", }, focusVisible: { dark: "hsl(143, 65%, 35%)", light: "hsl(143, 71%, 30%)", } }, shade: { 100: { dark: "hsl(0, 0%, 100%)", light: "hsl(0, 0%, 0%)", }, 200: { dark: "hsl(240, 3%, 69%)", light: "hsl(240, 2%, 30%)", }, 300: { dark: "hsl(240, 2%, 49%)", light: "hsl(240, 2%, 57%)", }, 400: { dark: "hsl(240, 1%, 33%)", light: "hsl(240, 3%, 69%)", }, 500: { dark: "hsl(240, 1%, 27%)", light: "hsl(240, 5%, 79%)", }, 600: { dark: "hsl(240, 2%, 22%)", light: "hsl(240, 6%, 83%)", }, 700: { dark: "hsl(240, 3%, 15%)", light: "hsl(240, 11%, 91%)", }, 800: { dark: "hsl(240, 6%, 10%)", light: "hsl(240, 24%, 96%)", } } }, }, }, safelist: [ { pattern: /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/, variants: ["hover", "ui-selected"], }, { pattern: /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/, variants: ["hover", "ui-selected"], }, { pattern: /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/, variants: ["hover", "ui-selected"], }, { pattern: /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/, }, { pattern: /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/, }, { pattern: /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/, }, ], plugins: [ require('@tailwindcss/typography'), require('@tailwindcss/forms'), require("tailwindcss-radix"), ] };