diff --git a/index.html b/index.html index 8db989b..66545e3 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,14 @@ + + + + + Analytrick + - - - - - Analytrick - - - -
- - - - \ No newline at end of file + +
+ + + diff --git a/src/App.jsx b/src/App.jsx index 76c639b..20e41c0 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,160 +1,176 @@ function App() { return ( - <> -
-
-
-
-

Total Employees

-

125

-
-
👥
-
- -
-
-

Departments

-

8

-
-
🏢
-
- -
-
-

Attendance Today

-

113

-
-
🕒
-
- -
-
-

Pending Payroll

-

12

-
-
💼
-
-
- -
-
-

Monthly Attendance

-
-
-
-
-
-
-
- Jan -
- -
-
-
-
-
-
- Feb -
- -
-
-
-
-
-
- Mar -
- -
-
-
-
-
-
- Apr -
- -
-
-
-
-
-
- May -
- -
-
-
-
-
-
- Jun -
- -
-
-
-
-
-
- Jul -
-
-
- -
-

Expense Breakdown

-
-
-
+ <> +
+
+
-

Salaries

-

45%

+

Total Employees

+

125

+
+
👥
+
+ +
+
+

Departments

+

8

+
+
🏢
+
+ +
+
+

Attendance Today

+

113

+
+
🕒
+
+ +
+
+

Pending Payroll

+

12

+
+
💼
+
+
+ +
+
+

+ Monthly Attendance +

+
+
+
+
+
+
+
+ Jan +
+ +
+
+
+
+
+
+ Feb +
+ +
+
+
+
+
+
+ Mar +
+ +
+
+
+
+
+
+ Apr +
+ +
+
+
+
+
+
+ May +
+ +
+
+
+
+
+
+ Jun +
+ +
+
+
+
+
+
+ Jul +
+ +
+

+ Expense Breakdown +

+
+
+
+
+

Salaries

+

45%

+
+
+
+
+
+ +
+

+ Recent Activities +

+
+
+
+
+ 👨 +
+

+ John Doe added a new employee +

+
+ 5 mins ago +
+ +
+
+
+ 👩 +
+

+ Payroll processed for June +

+
+ 30 mins ago +
+ +
+
+
+ 🧑 +
+

Finance report updated

+
+ 1 hour ago +
+
+ + +
-
- -
-

Recent Activities

-
-
-
-
👨
-

John Doe added a new employee

-
- 5 mins ago -
- -
-
-
👩
-

Payroll processed for June

-
- 30 mins ago -
- -
-
-
🧑
-

Finance report updated

-
- 1 hour ago -
-
- - -
-
-
- -); + + ); } export default App; diff --git a/tailwind.config.js b/tailwind.config.js index 1530891..65749c5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,19 +1,19 @@ /** @type {import('tailwindcss').Config} */ export default { - content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}",], + content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], presets: [], - darkMode: 'media', // or 'class' + darkMode: "media", // or 'class' theme: { accentColor: ({ theme }) => ({ - ...theme('colors'), - auto: 'auto', + ...theme("colors"), + auto: "auto", }), animation: { - none: 'none', - spin: 'spin 1s linear infinite', - ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', - pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', - bounce: 'bounce 1s infinite', + none: "none", + spin: "spin 1s linear infinite", + ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite", + pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", + bounce: "bounce 1s infinite", }, aria: { busy: 'busy="true"', @@ -27,110 +27,114 @@ export default { selected: 'selected="true"', }, aspectRatio: { - auto: 'auto', - square: '1 / 1', - video: '16 / 9', + auto: "auto", + square: "1 / 1", + video: "16 / 9", }, - backdropBlur: ({ theme }) => theme('blur'), - backdropBrightness: ({ theme }) => theme('brightness'), - backdropContrast: ({ theme }) => theme('contrast'), - backdropGrayscale: ({ theme }) => theme('grayscale'), - backdropHueRotate: ({ theme }) => theme('hueRotate'), - backdropInvert: ({ theme }) => theme('invert'), - backdropOpacity: ({ theme }) => theme('opacity'), - backdropSaturate: ({ theme }) => theme('saturate'), - backdropSepia: ({ theme }) => theme('sepia'), - backgroundColor: ({ theme }) => theme('colors'), + backdropBlur: ({ theme }) => theme("blur"), + backdropBrightness: ({ theme }) => theme("brightness"), + backdropContrast: ({ theme }) => theme("contrast"), + backdropGrayscale: ({ theme }) => theme("grayscale"), + backdropHueRotate: ({ theme }) => theme("hueRotate"), + backdropInvert: ({ theme }) => theme("invert"), + backdropOpacity: ({ theme }) => theme("opacity"), + backdropSaturate: ({ theme }) => theme("saturate"), + backdropSepia: ({ theme }) => theme("sepia"), + backgroundColor: ({ theme }) => theme("colors"), backgroundImage: { - none: 'none', - 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))', - 'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))', - 'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))', - 'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))', - 'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))', - 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))', - 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))', - 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))', + none: "none", + "gradient-to-t": "linear-gradient(to top, var(--tw-gradient-stops))", + "gradient-to-tr": + "linear-gradient(to top right, var(--tw-gradient-stops))", + "gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))", + "gradient-to-br": + "linear-gradient(to bottom right, var(--tw-gradient-stops))", + "gradient-to-b": "linear-gradient(to bottom, var(--tw-gradient-stops))", + "gradient-to-bl": + "linear-gradient(to bottom left, var(--tw-gradient-stops))", + "gradient-to-l": "linear-gradient(to left, var(--tw-gradient-stops))", + "gradient-to-tl": + "linear-gradient(to top left, var(--tw-gradient-stops))", }, - backgroundOpacity: ({ theme }) => theme('opacity'), + backgroundOpacity: ({ theme }) => theme("opacity"), backgroundPosition: { - bottom: 'bottom', - center: 'center', - left: 'left', - 'left-bottom': 'left bottom', - 'left-top': 'left top', - right: 'right', - 'right-bottom': 'right bottom', - 'right-top': 'right top', - top: 'top', + bottom: "bottom", + center: "center", + left: "left", + "left-bottom": "left bottom", + "left-top": "left top", + right: "right", + "right-bottom": "right bottom", + "right-top": "right top", + top: "top", }, backgroundSize: { - auto: 'auto', - cover: 'cover', - contain: 'contain', + auto: "auto", + cover: "cover", + contain: "contain", }, blur: { - 0: '0', - none: '', - sm: '4px', - DEFAULT: '8px', - md: '12px', - lg: '16px', - xl: '24px', - '2xl': '40px', - '3xl': '64px', + 0: "0", + none: "", + sm: "4px", + DEFAULT: "8px", + md: "12px", + lg: "16px", + xl: "24px", + "2xl": "40px", + "3xl": "64px", }, borderColor: ({ theme }) => ({ - ...theme('colors'), - DEFAULT: theme('colors.gray.200', 'currentColor'), + ...theme("colors"), + DEFAULT: theme("colors.gray.200", "currentColor"), }), - borderOpacity: ({ theme }) => theme('opacity'), + borderOpacity: ({ theme }) => theme("opacity"), borderRadius: { - none: '0px', - sm: '0.125rem', - DEFAULT: '0.25rem', - md: '0.375rem', - lg: '0.5rem', - xl: '0.75rem', - '2xl': '1rem', - '3xl': '1.5rem', - full: '9999px', + none: "0px", + sm: "0.125rem", + DEFAULT: "0.25rem", + md: "0.375rem", + lg: "0.5rem", + xl: "0.75rem", + "2xl": "1rem", + "3xl": "1.5rem", + full: "9999px", }, borderSpacing: ({ theme }) => ({ - ...theme('spacing'), + ...theme("spacing"), }), borderWidth: { - DEFAULT: '1px', - 0: '0px', - 2: '2px', - 4: '4px', - 8: '8px', + DEFAULT: "1px", + 0: "0px", + 2: "2px", + 4: "4px", + 8: "8px", }, boxShadow: { - sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)', - DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', - md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', - lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', - xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', - '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)', - inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)', - none: 'none', + sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)", + DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", + md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", + lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", + xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)", + "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)", + inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)", + none: "none", }, - boxShadowColor: ({ theme }) => theme('colors'), + boxShadowColor: ({ theme }) => theme("colors"), brightness: { - 0: '0', - 50: '.5', - 75: '.75', - 90: '.9', - 95: '.95', - 100: '1', - 105: '1.05', - 110: '1.1', - 125: '1.25', - 150: '1.5', - 200: '2', + 0: "0", + 50: ".5", + 75: ".75", + 90: ".9", + 95: ".95", + 100: "1", + 105: "1.05", + 110: "1.1", + 125: "1.25", + 150: "1.5", + 200: "2", }, - caretColor: ({ theme }) => theme('colors'), + caretColor: ({ theme }) => theme("colors"), colors: ({ colors }) => ({ inherit: colors.inherit, current: colors.current, @@ -161,904 +165,911 @@ export default { rose: colors.rose, }), columns: { - auto: 'auto', - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - 7: '7', - 8: '8', - 9: '9', - 10: '10', - 11: '11', - 12: '12', - '3xs': '16rem', - '2xs': '18rem', - xs: '20rem', - sm: '24rem', - md: '28rem', - lg: '32rem', - xl: '36rem', - '2xl': '42rem', - '3xl': '48rem', - '4xl': '56rem', - '5xl': '64rem', - '6xl': '72rem', - '7xl': '80rem', + auto: "auto", + 1: "1", + 2: "2", + 3: "3", + 4: "4", + 5: "5", + 6: "6", + 7: "7", + 8: "8", + 9: "9", + 10: "10", + 11: "11", + 12: "12", + "3xs": "16rem", + "2xs": "18rem", + xs: "20rem", + sm: "24rem", + md: "28rem", + lg: "32rem", + xl: "36rem", + "2xl": "42rem", + "3xl": "48rem", + "4xl": "56rem", + "5xl": "64rem", + "6xl": "72rem", + "7xl": "80rem", }, container: {}, content: { - none: 'none', + none: "none", }, contrast: { - 0: '0', - 50: '.5', - 75: '.75', - 100: '1', - 125: '1.25', - 150: '1.5', - 200: '2', + 0: "0", + 50: ".5", + 75: ".75", + 100: "1", + 125: "1.25", + 150: "1.5", + 200: "2", }, cursor: { - auto: 'auto', - default: 'default', - pointer: 'pointer', - wait: 'wait', - text: 'text', - move: 'move', - help: 'help', - 'not-allowed': 'not-allowed', - none: 'none', - 'context-menu': 'context-menu', - progress: 'progress', - cell: 'cell', - crosshair: 'crosshair', - 'vertical-text': 'vertical-text', - alias: 'alias', - copy: 'copy', - 'no-drop': 'no-drop', - grab: 'grab', - grabbing: 'grabbing', - 'all-scroll': 'all-scroll', - 'col-resize': 'col-resize', - 'row-resize': 'row-resize', - 'n-resize': 'n-resize', - 'e-resize': 'e-resize', - 's-resize': 's-resize', - 'w-resize': 'w-resize', - 'ne-resize': 'ne-resize', - 'nw-resize': 'nw-resize', - 'se-resize': 'se-resize', - 'sw-resize': 'sw-resize', - 'ew-resize': 'ew-resize', - 'ns-resize': 'ns-resize', - 'nesw-resize': 'nesw-resize', - 'nwse-resize': 'nwse-resize', - 'zoom-in': 'zoom-in', - 'zoom-out': 'zoom-out', + auto: "auto", + default: "default", + pointer: "pointer", + wait: "wait", + text: "text", + move: "move", + help: "help", + "not-allowed": "not-allowed", + none: "none", + "context-menu": "context-menu", + progress: "progress", + cell: "cell", + crosshair: "crosshair", + "vertical-text": "vertical-text", + alias: "alias", + copy: "copy", + "no-drop": "no-drop", + grab: "grab", + grabbing: "grabbing", + "all-scroll": "all-scroll", + "col-resize": "col-resize", + "row-resize": "row-resize", + "n-resize": "n-resize", + "e-resize": "e-resize", + "s-resize": "s-resize", + "w-resize": "w-resize", + "ne-resize": "ne-resize", + "nw-resize": "nw-resize", + "se-resize": "se-resize", + "sw-resize": "sw-resize", + "ew-resize": "ew-resize", + "ns-resize": "ns-resize", + "nesw-resize": "nesw-resize", + "nwse-resize": "nwse-resize", + "zoom-in": "zoom-in", + "zoom-out": "zoom-out", }, - divideColor: ({ theme }) => theme('borderColor'), - divideOpacity: ({ theme }) => theme('borderOpacity'), - divideWidth: ({ theme }) => theme('borderWidth'), + divideColor: ({ theme }) => theme("borderColor"), + divideOpacity: ({ theme }) => theme("borderOpacity"), + divideWidth: ({ theme }) => theme("borderWidth"), dropShadow: { - sm: '0 1px 1px rgb(0 0 0 / 0.05)', - DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'], - md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'], - lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'], - xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'], - '2xl': '0 25px 25px rgb(0 0 0 / 0.15)', - none: '0 0 #0000', + sm: "0 1px 1px rgb(0 0 0 / 0.05)", + DEFAULT: ["0 1px 2px rgb(0 0 0 / 0.1)", "0 1px 1px rgb(0 0 0 / 0.06)"], + md: ["0 4px 3px rgb(0 0 0 / 0.07)", "0 2px 2px rgb(0 0 0 / 0.06)"], + lg: ["0 10px 8px rgb(0 0 0 / 0.04)", "0 4px 3px rgb(0 0 0 / 0.1)"], + xl: ["0 20px 13px rgb(0 0 0 / 0.03)", "0 8px 5px rgb(0 0 0 / 0.08)"], + "2xl": "0 25px 25px rgb(0 0 0 / 0.15)", + none: "0 0 #0000", }, fill: ({ theme }) => ({ - none: 'none', - ...theme('colors'), + none: "none", + ...theme("colors"), }), flex: { - 1: '1 1 0%', - auto: '1 1 auto', - initial: '0 1 auto', - none: 'none', + 1: "1 1 0%", + auto: "1 1 auto", + initial: "0 1 auto", + none: "none", }, flexBasis: ({ theme }) => ({ - auto: 'auto', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - '1/12': '8.333333%', - '2/12': '16.666667%', - '3/12': '25%', - '4/12': '33.333333%', - '5/12': '41.666667%', - '6/12': '50%', - '7/12': '58.333333%', - '8/12': '66.666667%', - '9/12': '75%', - '10/12': '83.333333%', - '11/12': '91.666667%', - full: '100%', + auto: "auto", + ...theme("spacing"), + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + full: "100%", }), flexGrow: { - 0: '0', - DEFAULT: '1', + 0: "0", + DEFAULT: "1", }, flexShrink: { - 0: '0', - DEFAULT: '1', + 0: "0", + DEFAULT: "1", }, fontFamily: { sans: [ - 'ui-sans-serif', - 'system-ui', - 'sans-serif', + "ui-sans-serif", + "system-ui", + "sans-serif", '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"', ], - serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], + serif: [ + "ui-serif", + "Georgia", + "Cambria", + '"Times New Roman"', + "Times", + "serif", + ], mono: [ - 'ui-monospace', - 'SFMono-Regular', - 'Menlo', - 'Monaco', - 'Consolas', + "ui-monospace", + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", '"Liberation Mono"', '"Courier New"', - 'monospace', + "monospace", ], }, fontSize: { - xs: ['0.75rem', { lineHeight: '1rem' }], - sm: ['0.875rem', { lineHeight: '1.25rem' }], - base: ['1rem', { lineHeight: '1.5rem' }], - lg: ['1.125rem', { lineHeight: '1.75rem' }], - xl: ['1.25rem', { lineHeight: '1.75rem' }], - '2xl': ['1.5rem', { lineHeight: '2rem' }], - '3xl': ['1.875rem', { lineHeight: '2.25rem' }], - '4xl': ['2.25rem', { lineHeight: '2.5rem' }], - '5xl': ['3rem', { lineHeight: '1' }], - '6xl': ['3.75rem', { lineHeight: '1' }], - '7xl': ['4.5rem', { lineHeight: '1' }], - '8xl': ['6rem', { lineHeight: '1' }], - '9xl': ['8rem', { lineHeight: '1' }], + xs: ["0.75rem", { lineHeight: "1rem" }], + sm: ["0.875rem", { lineHeight: "1.25rem" }], + base: ["1rem", { lineHeight: "1.5rem" }], + lg: ["1.125rem", { lineHeight: "1.75rem" }], + xl: ["1.25rem", { lineHeight: "1.75rem" }], + "2xl": ["1.5rem", { lineHeight: "2rem" }], + "3xl": ["1.875rem", { lineHeight: "2.25rem" }], + "4xl": ["2.25rem", { lineHeight: "2.5rem" }], + "5xl": ["3rem", { lineHeight: "1" }], + "6xl": ["3.75rem", { lineHeight: "1" }], + "7xl": ["4.5rem", { lineHeight: "1" }], + "8xl": ["6rem", { lineHeight: "1" }], + "9xl": ["8rem", { lineHeight: "1" }], }, fontWeight: { - thin: '100', - extralight: '200', - light: '300', - normal: '400', - medium: '500', - semibold: '600', - bold: '700', - extrabold: '800', - black: '900', + thin: "100", + extralight: "200", + light: "300", + normal: "400", + medium: "500", + semibold: "600", + bold: "700", + extrabold: "800", + black: "900", }, - gap: ({ theme }) => theme('spacing'), - gradientColorStops: ({ theme }) => theme('colors'), + gap: ({ theme }) => theme("spacing"), + gradientColorStops: ({ theme }) => theme("colors"), gradientColorStopPositions: { - '0%': '0%', - '5%': '5%', - '10%': '10%', - '15%': '15%', - '20%': '20%', - '25%': '25%', - '30%': '30%', - '35%': '35%', - '40%': '40%', - '45%': '45%', - '50%': '50%', - '55%': '55%', - '60%': '60%', - '65%': '65%', - '70%': '70%', - '75%': '75%', - '80%': '80%', - '85%': '85%', - '90%': '90%', - '95%': '95%', - '100%': '100%', + "0%": "0%", + "5%": "5%", + "10%": "10%", + "15%": "15%", + "20%": "20%", + "25%": "25%", + "30%": "30%", + "35%": "35%", + "40%": "40%", + "45%": "45%", + "50%": "50%", + "55%": "55%", + "60%": "60%", + "65%": "65%", + "70%": "70%", + "75%": "75%", + "80%": "80%", + "85%": "85%", + "90%": "90%", + "95%": "95%", + "100%": "100%", }, grayscale: { - 0: '0', - DEFAULT: '100%', + 0: "0", + DEFAULT: "100%", }, gridAutoColumns: { - auto: 'auto', - min: 'min-content', - max: 'max-content', - fr: 'minmax(0, 1fr)', + auto: "auto", + min: "min-content", + max: "max-content", + fr: "minmax(0, 1fr)", }, gridAutoRows: { - auto: 'auto', - min: 'min-content', - max: 'max-content', - fr: 'minmax(0, 1fr)', + auto: "auto", + min: "min-content", + max: "max-content", + fr: "minmax(0, 1fr)", }, gridColumn: { - auto: 'auto', - 'span-1': 'span 1 / span 1', - 'span-2': 'span 2 / span 2', - 'span-3': 'span 3 / span 3', - 'span-4': 'span 4 / span 4', - 'span-5': 'span 5 / span 5', - 'span-6': 'span 6 / span 6', - 'span-7': 'span 7 / span 7', - 'span-8': 'span 8 / span 8', - 'span-9': 'span 9 / span 9', - 'span-10': 'span 10 / span 10', - 'span-11': 'span 11 / span 11', - 'span-12': 'span 12 / span 12', - 'span-full': '1 / -1', + auto: "auto", + "span-1": "span 1 / span 1", + "span-2": "span 2 / span 2", + "span-3": "span 3 / span 3", + "span-4": "span 4 / span 4", + "span-5": "span 5 / span 5", + "span-6": "span 6 / span 6", + "span-7": "span 7 / span 7", + "span-8": "span 8 / span 8", + "span-9": "span 9 / span 9", + "span-10": "span 10 / span 10", + "span-11": "span 11 / span 11", + "span-12": "span 12 / span 12", + "span-full": "1 / -1", }, gridColumnEnd: { - auto: 'auto', - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - 7: '7', - 8: '8', - 9: '9', - 10: '10', - 11: '11', - 12: '12', - 13: '13', + auto: "auto", + 1: "1", + 2: "2", + 3: "3", + 4: "4", + 5: "5", + 6: "6", + 7: "7", + 8: "8", + 9: "9", + 10: "10", + 11: "11", + 12: "12", + 13: "13", }, gridColumnStart: { - auto: 'auto', - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - 7: '7', - 8: '8', - 9: '9', - 10: '10', - 11: '11', - 12: '12', - 13: '13', + auto: "auto", + 1: "1", + 2: "2", + 3: "3", + 4: "4", + 5: "5", + 6: "6", + 7: "7", + 8: "8", + 9: "9", + 10: "10", + 11: "11", + 12: "12", + 13: "13", }, gridRow: { - auto: 'auto', - 'span-1': 'span 1 / span 1', - 'span-2': 'span 2 / span 2', - 'span-3': 'span 3 / span 3', - 'span-4': 'span 4 / span 4', - 'span-5': 'span 5 / span 5', - 'span-6': 'span 6 / span 6', - 'span-7': 'span 7 / span 7', - 'span-8': 'span 8 / span 8', - 'span-9': 'span 9 / span 9', - 'span-10': 'span 10 / span 10', - 'span-11': 'span 11 / span 11', - 'span-12': 'span 12 / span 12', - 'span-full': '1 / -1', + auto: "auto", + "span-1": "span 1 / span 1", + "span-2": "span 2 / span 2", + "span-3": "span 3 / span 3", + "span-4": "span 4 / span 4", + "span-5": "span 5 / span 5", + "span-6": "span 6 / span 6", + "span-7": "span 7 / span 7", + "span-8": "span 8 / span 8", + "span-9": "span 9 / span 9", + "span-10": "span 10 / span 10", + "span-11": "span 11 / span 11", + "span-12": "span 12 / span 12", + "span-full": "1 / -1", }, gridRowEnd: { - auto: 'auto', - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - 7: '7', - 8: '8', - 9: '9', - 10: '10', - 11: '11', - 12: '12', - 13: '13', + auto: "auto", + 1: "1", + 2: "2", + 3: "3", + 4: "4", + 5: "5", + 6: "6", + 7: "7", + 8: "8", + 9: "9", + 10: "10", + 11: "11", + 12: "12", + 13: "13", }, gridRowStart: { - auto: 'auto', - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - 7: '7', - 8: '8', - 9: '9', - 10: '10', - 11: '11', - 12: '12', - 13: '13', + auto: "auto", + 1: "1", + 2: "2", + 3: "3", + 4: "4", + 5: "5", + 6: "6", + 7: "7", + 8: "8", + 9: "9", + 10: "10", + 11: "11", + 12: "12", + 13: "13", }, gridTemplateColumns: { - none: 'none', - subgrid: 'subgrid', - 1: 'repeat(1, minmax(0, 1fr))', - 2: 'repeat(2, minmax(0, 1fr))', - 3: 'repeat(3, minmax(0, 1fr))', - 4: 'repeat(4, minmax(0, 1fr))', - 5: 'repeat(5, minmax(0, 1fr))', - 6: 'repeat(6, minmax(0, 1fr))', - 7: 'repeat(7, minmax(0, 1fr))', - 8: 'repeat(8, minmax(0, 1fr))', - 9: 'repeat(9, minmax(0, 1fr))', - 10: 'repeat(10, minmax(0, 1fr))', - 11: 'repeat(11, minmax(0, 1fr))', - 12: 'repeat(12, minmax(0, 1fr))', + none: "none", + subgrid: "subgrid", + 1: "repeat(1, minmax(0, 1fr))", + 2: "repeat(2, minmax(0, 1fr))", + 3: "repeat(3, minmax(0, 1fr))", + 4: "repeat(4, minmax(0, 1fr))", + 5: "repeat(5, minmax(0, 1fr))", + 6: "repeat(6, minmax(0, 1fr))", + 7: "repeat(7, minmax(0, 1fr))", + 8: "repeat(8, minmax(0, 1fr))", + 9: "repeat(9, minmax(0, 1fr))", + 10: "repeat(10, minmax(0, 1fr))", + 11: "repeat(11, minmax(0, 1fr))", + 12: "repeat(12, minmax(0, 1fr))", }, gridTemplateRows: { - none: 'none', - subgrid: 'subgrid', - 1: 'repeat(1, minmax(0, 1fr))', - 2: 'repeat(2, minmax(0, 1fr))', - 3: 'repeat(3, minmax(0, 1fr))', - 4: 'repeat(4, minmax(0, 1fr))', - 5: 'repeat(5, minmax(0, 1fr))', - 6: 'repeat(6, minmax(0, 1fr))', - 7: 'repeat(7, minmax(0, 1fr))', - 8: 'repeat(8, minmax(0, 1fr))', - 9: 'repeat(9, minmax(0, 1fr))', - 10: 'repeat(10, minmax(0, 1fr))', - 11: 'repeat(11, minmax(0, 1fr))', - 12: 'repeat(12, minmax(0, 1fr))', + none: "none", + subgrid: "subgrid", + 1: "repeat(1, minmax(0, 1fr))", + 2: "repeat(2, minmax(0, 1fr))", + 3: "repeat(3, minmax(0, 1fr))", + 4: "repeat(4, minmax(0, 1fr))", + 5: "repeat(5, minmax(0, 1fr))", + 6: "repeat(6, minmax(0, 1fr))", + 7: "repeat(7, minmax(0, 1fr))", + 8: "repeat(8, minmax(0, 1fr))", + 9: "repeat(9, minmax(0, 1fr))", + 10: "repeat(10, minmax(0, 1fr))", + 11: "repeat(11, minmax(0, 1fr))", + 12: "repeat(12, minmax(0, 1fr))", }, height: ({ theme }) => ({ - auto: 'auto', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - full: '100%', - screen: '100vh', - svh: '100svh', - lvh: '100lvh', - dvh: '100dvh', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', + auto: "auto", + ...theme("spacing"), + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + full: "100%", + screen: "100vh", + svh: "100svh", + lvh: "100lvh", + dvh: "100dvh", + min: "min-content", + max: "max-content", + fit: "fit-content", }), hueRotate: { - 0: '0deg', - 15: '15deg', - 30: '30deg', - 60: '60deg', - 90: '90deg', - 180: '180deg', + 0: "0deg", + 15: "15deg", + 30: "30deg", + 60: "60deg", + 90: "90deg", + 180: "180deg", }, inset: ({ theme }) => ({ - auto: 'auto', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - full: '100%', + auto: "auto", + ...theme("spacing"), + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + full: "100%", }), invert: { - 0: '0', - DEFAULT: '100%', + 0: "0", + DEFAULT: "100%", }, keyframes: { spin: { to: { - transform: 'rotate(360deg)', + transform: "rotate(360deg)", }, }, ping: { - '75%, 100%': { - transform: 'scale(2)', - opacity: '0', + "75%, 100%": { + transform: "scale(2)", + opacity: "0", }, }, pulse: { - '50%': { - opacity: '.5', + "50%": { + opacity: ".5", }, }, bounce: { - '0%, 100%': { - transform: 'translateY(-25%)', - animationTimingFunction: 'cubic-bezier(0.8,0,1,1)', + "0%, 100%": { + transform: "translateY(-25%)", + animationTimingFunction: "cubic-bezier(0.8,0,1,1)", }, - '50%': { - transform: 'none', - animationTimingFunction: 'cubic-bezier(0,0,0.2,1)', + "50%": { + transform: "none", + animationTimingFunction: "cubic-bezier(0,0,0.2,1)", }, }, }, letterSpacing: { - tighter: '-0.05em', - tight: '-0.025em', - normal: '0em', - wide: '0.025em', - wider: '0.05em', - widest: '0.1em', + tighter: "-0.05em", + tight: "-0.025em", + normal: "0em", + wide: "0.025em", + wider: "0.05em", + widest: "0.1em", }, lineHeight: { - none: '1', - tight: '1.25', - snug: '1.375', - normal: '1.5', - relaxed: '1.625', - loose: '2', - 3: '.75rem', - 4: '1rem', - 5: '1.25rem', - 6: '1.5rem', - 7: '1.75rem', - 8: '2rem', - 9: '2.25rem', - 10: '2.5rem', + none: "1", + tight: "1.25", + snug: "1.375", + normal: "1.5", + relaxed: "1.625", + loose: "2", + 3: ".75rem", + 4: "1rem", + 5: "1.25rem", + 6: "1.5rem", + 7: "1.75rem", + 8: "2rem", + 9: "2.25rem", + 10: "2.5rem", }, listStyleType: { - none: 'none', - disc: 'disc', - decimal: 'decimal', + none: "none", + disc: "disc", + decimal: "decimal", }, listStyleImage: { - none: 'none', + none: "none", }, margin: ({ theme }) => ({ - auto: 'auto', - ...theme('spacing'), + auto: "auto", + ...theme("spacing"), }), lineClamp: { - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', + 1: "1", + 2: "2", + 3: "3", + 4: "4", + 5: "5", + 6: "6", }, maxHeight: ({ theme }) => ({ - ...theme('spacing'), - none: 'none', - full: '100%', - screen: '100vh', - svh: '100svh', - lvh: '100lvh', - dvh: '100dvh', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', + ...theme("spacing"), + none: "none", + full: "100%", + screen: "100vh", + svh: "100svh", + lvh: "100lvh", + dvh: "100dvh", + min: "min-content", + max: "max-content", + fit: "fit-content", }), maxWidth: ({ theme, breakpoints }) => ({ - ...theme('spacing'), - none: 'none', - xs: '20rem', - sm: '24rem', - md: '28rem', - lg: '32rem', - xl: '36rem', - '2xl': '42rem', - '3xl': '48rem', - '4xl': '56rem', - '5xl': '64rem', - '6xl': '72rem', - '7xl': '80rem', - full: '100%', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', - prose: '65ch', - ...breakpoints(theme('screens')), + ...theme("spacing"), + none: "none", + xs: "20rem", + sm: "24rem", + md: "28rem", + lg: "32rem", + xl: "36rem", + "2xl": "42rem", + "3xl": "48rem", + "4xl": "56rem", + "5xl": "64rem", + "6xl": "72rem", + "7xl": "80rem", + full: "100%", + min: "min-content", + max: "max-content", + fit: "fit-content", + prose: "65ch", + ...breakpoints(theme("screens")), }), minHeight: ({ theme }) => ({ - ...theme('spacing'), - full: '100%', - screen: '100vh', - svh: '100svh', - lvh: '100lvh', - dvh: '100dvh', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', + ...theme("spacing"), + full: "100%", + screen: "100vh", + svh: "100svh", + lvh: "100lvh", + dvh: "100dvh", + min: "min-content", + max: "max-content", + fit: "fit-content", }), minWidth: ({ theme }) => ({ - ...theme('spacing'), - full: '100%', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', + ...theme("spacing"), + full: "100%", + min: "min-content", + max: "max-content", + fit: "fit-content", }), objectPosition: { - bottom: 'bottom', - center: 'center', - left: 'left', - 'left-bottom': 'left bottom', - 'left-top': 'left top', - right: 'right', - 'right-bottom': 'right bottom', - 'right-top': 'right top', - top: 'top', + bottom: "bottom", + center: "center", + left: "left", + "left-bottom": "left bottom", + "left-top": "left top", + right: "right", + "right-bottom": "right bottom", + "right-top": "right top", + top: "top", }, opacity: { - 0: '0', - 5: '0.05', - 10: '0.1', - 15: '0.15', - 20: '0.2', - 25: '0.25', - 30: '0.3', - 35: '0.35', - 40: '0.4', - 45: '0.45', - 50: '0.5', - 55: '0.55', - 60: '0.6', - 65: '0.65', - 70: '0.7', - 75: '0.75', - 80: '0.8', - 85: '0.85', - 90: '0.9', - 95: '0.95', - 100: '1', + 0: "0", + 5: "0.05", + 10: "0.1", + 15: "0.15", + 20: "0.2", + 25: "0.25", + 30: "0.3", + 35: "0.35", + 40: "0.4", + 45: "0.45", + 50: "0.5", + 55: "0.55", + 60: "0.6", + 65: "0.65", + 70: "0.7", + 75: "0.75", + 80: "0.8", + 85: "0.85", + 90: "0.9", + 95: "0.95", + 100: "1", }, order: { - first: '-9999', - last: '9999', - none: '0', - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - 7: '7', - 8: '8', - 9: '9', - 10: '10', - 11: '11', - 12: '12', + first: "-9999", + last: "9999", + none: "0", + 1: "1", + 2: "2", + 3: "3", + 4: "4", + 5: "5", + 6: "6", + 7: "7", + 8: "8", + 9: "9", + 10: "10", + 11: "11", + 12: "12", }, - outlineColor: ({ theme }) => theme('colors'), + outlineColor: ({ theme }) => theme("colors"), outlineOffset: { - 0: '0px', - 1: '1px', - 2: '2px', - 4: '4px', - 8: '8px', + 0: "0px", + 1: "1px", + 2: "2px", + 4: "4px", + 8: "8px", }, outlineWidth: { - 0: '0px', - 1: '1px', - 2: '2px', - 4: '4px', - 8: '8px', + 0: "0px", + 1: "1px", + 2: "2px", + 4: "4px", + 8: "8px", }, - padding: ({ theme }) => theme('spacing'), - placeholderColor: ({ theme }) => theme('colors'), - placeholderOpacity: ({ theme }) => theme('opacity'), + padding: ({ theme }) => theme("spacing"), + placeholderColor: ({ theme }) => theme("colors"), + placeholderOpacity: ({ theme }) => theme("opacity"), ringColor: ({ theme }) => ({ - DEFAULT: theme('colors.blue.500', '#3b82f6'), - ...theme('colors'), + DEFAULT: theme("colors.blue.500", "#3b82f6"), + ...theme("colors"), }), - ringOffsetColor: ({ theme }) => theme('colors'), + ringOffsetColor: ({ theme }) => theme("colors"), ringOffsetWidth: { - 0: '0px', - 1: '1px', - 2: '2px', - 4: '4px', - 8: '8px', + 0: "0px", + 1: "1px", + 2: "2px", + 4: "4px", + 8: "8px", }, ringOpacity: ({ theme }) => ({ - DEFAULT: '0.5', - ...theme('opacity'), + DEFAULT: "0.5", + ...theme("opacity"), }), ringWidth: { - DEFAULT: '3px', - 0: '0px', - 1: '1px', - 2: '2px', - 4: '4px', - 8: '8px', + DEFAULT: "3px", + 0: "0px", + 1: "1px", + 2: "2px", + 4: "4px", + 8: "8px", }, rotate: { - 0: '0deg', - 1: '1deg', - 2: '2deg', - 3: '3deg', - 6: '6deg', - 12: '12deg', - 45: '45deg', - 90: '90deg', - 180: '180deg', + 0: "0deg", + 1: "1deg", + 2: "2deg", + 3: "3deg", + 6: "6deg", + 12: "12deg", + 45: "45deg", + 90: "90deg", + 180: "180deg", }, saturate: { - 0: '0', - 50: '.5', - 100: '1', - 150: '1.5', - 200: '2', + 0: "0", + 50: ".5", + 100: "1", + 150: "1.5", + 200: "2", }, scale: { - 0: '0', - 50: '.5', - 75: '.75', - 90: '.9', - 95: '.95', - 100: '1', - 105: '1.05', - 110: '1.1', - 125: '1.25', - 150: '1.5', + 0: "0", + 50: ".5", + 75: ".75", + 90: ".9", + 95: ".95", + 100: "1", + 105: "1.05", + 110: "1.1", + 125: "1.25", + 150: "1.5", }, screens: { - sm: '640px', - md: '768px', - lg: '1024px', - xl: '1280px', - '2xl': '1536px', + sm: "640px", + md: "768px", + lg: "1024px", + xl: "1280px", + "2xl": "1536px", }, scrollMargin: ({ theme }) => ({ - ...theme('spacing'), + ...theme("spacing"), }), - scrollPadding: ({ theme }) => theme('spacing'), + scrollPadding: ({ theme }) => theme("spacing"), sepia: { - 0: '0', - DEFAULT: '100%', + 0: "0", + DEFAULT: "100%", }, skew: { - 0: '0deg', - 1: '1deg', - 2: '2deg', - 3: '3deg', - 6: '6deg', - 12: '12deg', + 0: "0deg", + 1: "1deg", + 2: "2deg", + 3: "3deg", + 6: "6deg", + 12: "12deg", }, space: ({ theme }) => ({ - ...theme('spacing'), + ...theme("spacing"), }), spacing: { - px: '1px', - 0: '0px', - 0.5: '0.125rem', - 1: '0.25rem', - 1.5: '0.375rem', - 2: '0.5rem', - 2.5: '0.625rem', - 3: '0.75rem', - 3.5: '0.875rem', - 4: '1rem', - 5: '1.25rem', - 6: '1.5rem', - 7: '1.75rem', - 8: '2rem', - 9: '2.25rem', - 10: '2.5rem', - 11: '2.75rem', - 12: '3rem', - 14: '3.5rem', - 16: '4rem', - 20: '5rem', - 24: '6rem', - 28: '7rem', - 32: '8rem', - 36: '9rem', - 40: '10rem', - 44: '11rem', - 48: '12rem', - 52: '13rem', - 56: '14rem', - 60: '15rem', - 64: '16rem', - 72: '18rem', - 80: '20rem', - 96: '24rem', + px: "1px", + 0: "0px", + 0.5: "0.125rem", + 1: "0.25rem", + 1.5: "0.375rem", + 2: "0.5rem", + 2.5: "0.625rem", + 3: "0.75rem", + 3.5: "0.875rem", + 4: "1rem", + 5: "1.25rem", + 6: "1.5rem", + 7: "1.75rem", + 8: "2rem", + 9: "2.25rem", + 10: "2.5rem", + 11: "2.75rem", + 12: "3rem", + 14: "3.5rem", + 16: "4rem", + 20: "5rem", + 24: "6rem", + 28: "7rem", + 32: "8rem", + 36: "9rem", + 40: "10rem", + 44: "11rem", + 48: "12rem", + 52: "13rem", + 56: "14rem", + 60: "15rem", + 64: "16rem", + 72: "18rem", + 80: "20rem", + 96: "24rem", }, stroke: ({ theme }) => ({ - none: 'none', - ...theme('colors'), + none: "none", + ...theme("colors"), }), strokeWidth: { - 0: '0', - 1: '1', - 2: '2', + 0: "0", + 1: "1", + 2: "2", }, supports: {}, data: {}, - textColor: ({ theme }) => theme('colors'), - textDecorationColor: ({ theme }) => theme('colors'), + textColor: ({ theme }) => theme("colors"), + textDecorationColor: ({ theme }) => theme("colors"), textDecorationThickness: { - auto: 'auto', - 'from-font': 'from-font', - 0: '0px', - 1: '1px', - 2: '2px', - 4: '4px', - 8: '8px', + auto: "auto", + "from-font": "from-font", + 0: "0px", + 1: "1px", + 2: "2px", + 4: "4px", + 8: "8px", }, textIndent: ({ theme }) => ({ - ...theme('spacing'), + ...theme("spacing"), }), - textOpacity: ({ theme }) => theme('opacity'), + textOpacity: ({ theme }) => theme("opacity"), textUnderlineOffset: { - auto: 'auto', - 0: '0px', - 1: '1px', - 2: '2px', - 4: '4px', - 8: '8px', + auto: "auto", + 0: "0px", + 1: "1px", + 2: "2px", + 4: "4px", + 8: "8px", }, transformOrigin: { - center: 'center', - top: 'top', - 'top-right': 'top right', - right: 'right', - 'bottom-right': 'bottom right', - bottom: 'bottom', - 'bottom-left': 'bottom left', - left: 'left', - 'top-left': 'top left', + center: "center", + top: "top", + "top-right": "top right", + right: "right", + "bottom-right": "bottom right", + bottom: "bottom", + "bottom-left": "bottom left", + left: "left", + "top-left": "top left", }, transitionDelay: { - 0: '0s', - 75: '75ms', - 100: '100ms', - 150: '150ms', - 200: '200ms', - 300: '300ms', - 500: '500ms', - 700: '700ms', - 1000: '1000ms', + 0: "0s", + 75: "75ms", + 100: "100ms", + 150: "150ms", + 200: "200ms", + 300: "300ms", + 500: "500ms", + 700: "700ms", + 1000: "1000ms", }, transitionDuration: { - DEFAULT: '150ms', - 0: '0s', - 75: '75ms', - 100: '100ms', - 150: '150ms', - 200: '200ms', - 300: '300ms', - 500: '500ms', - 700: '700ms', - 1000: '1000ms', + DEFAULT: "150ms", + 0: "0s", + 75: "75ms", + 100: "100ms", + 150: "150ms", + 200: "200ms", + 300: "300ms", + 500: "500ms", + 700: "700ms", + 1000: "1000ms", }, transitionProperty: { - none: 'none', - all: 'all', + none: "none", + all: "all", DEFAULT: - 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter', - colors: 'color, background-color, border-color, text-decoration-color, fill, stroke', - opacity: 'opacity', - shadow: 'box-shadow', - transform: 'transform', + "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter", + colors: + "color, background-color, border-color, text-decoration-color, fill, stroke", + opacity: "opacity", + shadow: "box-shadow", + transform: "transform", }, transitionTimingFunction: { - DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)', - linear: 'linear', - in: 'cubic-bezier(0.4, 0, 1, 1)', - out: 'cubic-bezier(0, 0, 0.2, 1)', - 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', + DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)", + linear: "linear", + in: "cubic-bezier(0.4, 0, 1, 1)", + out: "cubic-bezier(0, 0, 0.2, 1)", + "in-out": "cubic-bezier(0.4, 0, 0.2, 1)", }, translate: ({ theme }) => ({ - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - full: '100%', + ...theme("spacing"), + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + full: "100%", }), size: ({ theme }) => ({ - auto: 'auto', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - '1/12': '8.333333%', - '2/12': '16.666667%', - '3/12': '25%', - '4/12': '33.333333%', - '5/12': '41.666667%', - '6/12': '50%', - '7/12': '58.333333%', - '8/12': '66.666667%', - '9/12': '75%', - '10/12': '83.333333%', - '11/12': '91.666667%', - full: '100%', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', + auto: "auto", + ...theme("spacing"), + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + full: "100%", + min: "min-content", + max: "max-content", + fit: "fit-content", }), width: ({ theme }) => ({ - auto: 'auto', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - '1/12': '8.333333%', - '2/12': '16.666667%', - '3/12': '25%', - '4/12': '33.333333%', - '5/12': '41.666667%', - '6/12': '50%', - '7/12': '58.333333%', - '8/12': '66.666667%', - '9/12': '75%', - '10/12': '83.333333%', - '11/12': '91.666667%', - full: '100%', - screen: '100vw', - svw: '100svw', - lvw: '100lvw', - dvw: '100dvw', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', + auto: "auto", + ...theme("spacing"), + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + full: "100%", + screen: "100vw", + svw: "100svw", + lvw: "100lvw", + dvw: "100dvw", + min: "min-content", + max: "max-content", + fit: "fit-content", }), willChange: { - auto: 'auto', - scroll: 'scroll-position', - contents: 'contents', - transform: 'transform', + auto: "auto", + scroll: "scroll-position", + contents: "contents", + transform: "transform", }, zIndex: { - auto: 'auto', - 0: '0', - 10: '10', - 20: '20', - 30: '30', - 40: '40', - 50: '50', + auto: "auto", + 0: "0", + 10: "10", + 20: "20", + 30: "30", + 40: "40", + 50: "50", }, }, plugins: [], -} - +};