From: charleswrayjr <charleswrayjr@gmail.com>
Date: Sat, 13 Sep 2025 17:08:55 +0000 (-0500)
Subject: Working on tailwind and styles.
X-Git-Url: https://git.phasecustomsoft.com/static/git-favicon.png?a=commitdiff_plain;h=16c9c98f5304391a46dc2165280d0f4d96a37e17;p=phs-admin.git

Working on tailwind and styles.
---

diff --git a/src/index.css b/src/index.css
index 7f25905..17df0e7 100755
--- a/src/index.css
+++ b/src/index.css
@@ -1,20 +1,17 @@
-/* src/index.css */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import './styles/App.css';
-
 body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
\ No newline at end of file
+}
diff --git a/src/styles/App.css b/src/styles/App.css
index 98c3344..0a00b8f 100755
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -1,30 +1,30 @@
-/* src/styles/App.css */
-@layer components {
-    .container {
-        @apply max-w-7xl mx-auto p-4;
-    }
-}
-
-.table-header {
-    @apply bg-gray-100 font-semibold text-gray-800;
-}
+/* main.css or similar */
 
-.table-row {
-    @apply border-b hover:bg-gray-50;
+.App {
+  text-align: center;
 }
 
-.chat-container {
-    @apply max-w-3xl mx-auto p-4 bg-white shadow-md rounded-lg;
+.app-header {
+  min-height: 2rem;
+  background-color: rgb(103, 58, 183);
+  padding: .25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
 }
 
-.chat-message {
-    @apply p-2 my-2 rounded-lg;
+.App-link {
+  color: #61dafb;
 }
 
-.chat-message-sent {
-    @apply bg-blue-100 ml-auto max-w-xs;
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
-
-.chat-message-received {
-    @apply bg-gray-100 mr-auto max-w-xs;
-}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 5ec84ce..f2b75db 100755
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,22 +1,1226 @@
-/**
- * @file Tailwind CSS configuration
- */
-
 /** @type {import('tailwindcss').Config} */
+/* eslint-disable import/no-extraneous-dependencies */
 const path = require('path');
 
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
   safelist: ['pl-24', 'pl-40', 'pl-56', 'pl-72', 'pl-80'],
   presets: [],
-  darkMode: 'class',
+  darkMode: 'class', // or 'class'
   theme: {
-    extend: {
-      maxWidth: {
-        '7xl': '128rem', // Match spacing.7xl
+    accentColor: ({ theme }) => ({
+      ...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',
+    },
+    aria: {
+      checked: 'checked="true"',
+      disabled: 'disabled="true"',
+      expanded: 'expanded="true"',
+      hidden: 'hidden="true"',
+      pressed: 'pressed="true"',
+      readonly: 'readonly="true"',
+      required: 'required="true"',
+      selected: 'selected="true"',
+    },
+    aspectRatio: {
+      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'),
+    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))',
+    },
+    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',
+    },
+    backgroundSize: {
+      auto: 'auto',
+      cover: 'cover',
+      contain: 'contain',
+    },
+    blur: {
+      0: '0',
+      none: '0',
+      sm: '4px',
+      DEFAULT: '8px',
+      md: '12px',
+      lg: '16px',
+      xl: '24px',
+      '2xl': '40px',
+      '3xl': '64px',
+    },
+    borderColor: ({ theme }) => ({
+      ...theme('colors'),
+      DEFAULT: theme('colors.gray.200', 'currentColor'),
+    }),
+    borderOpacity: ({ theme }) => theme('opacity'),
+    borderRadius: {
+      none: '0px',
+      sm: '.2rem',
+      DEFAULT: '.4rem',
+      md: '.6rem',
+      lg: '.8rem',
+      xl: '1.2rem',
+      '2xl': '1.6rem',
+      '3xl': '2.4rem',
+      full: '9999px',
+      0: '0px',
+      2: '.2rem',
+      4: '.4rem',
+      6: '.6rem',
+      8: '.8rem',
+      12: '1.2rem',
+      16: '1.6rem',
+      20: '2rem',
+      24: '2.4rem',
+      28: '2.8rem',
+      32: '3.2rem',
+    },
+    borderSpacing: ({ theme }) => ({
+      ...theme('spacing'),
+    }),
+    borderWidth: {
+      DEFAULT: '1px',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      3: '3px',
+      4: '4px',
+      8: '8px',
+    },
+    boxShadow: {
+      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+      inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+      none: 'none',
+      0: '0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)',
+      1: '0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)',
+      2: '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
+      3: '0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)',
+      4: '0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)',
+      5: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12)',
+      6: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
+      7: '0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12)',
+      8: '0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)',
+      9: '0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12)',
+      10: '0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12)',
+      11: '0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12)',
+      12: '0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)',
+      13: '0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12)',
+      14: '0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12)',
+      15: '0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12)',
+      16: '0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)',
+      17: '0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12)',
+      18: '0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12)',
+      19: '0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12)',
+      20: '0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12)',
+      21: '0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12)',
+      22: '0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12)',
+      23: '0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12)',
+      24: '0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)',
+    },
+    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',
+    },
+    caretColor: ({ theme }) => theme('colors'),
+    colors: ({ colors }) => ({
+      inherit: colors.inherit,
+      current: colors.current,
+      transparent: 'transparent',
+      black: '#22292F',
+      white: '#fff',
+      grey: {
+        50: '#FAFAFA',
+        100: '#F5F5F5',
+        200: '#EEEEEE',
+        300: '#E0E0E0',
+        400: '#BDBDBD',
+        500: '#9E9E9E',
+        DEFAULT: '#9E9E9E',
+        600: '#757575',
+        700: '#616161',
+        800: '#424242',
+        900: '#212121',
+        A100: '#D5D5D5',
+        A200: '#AAAAAA',
+        A400: '#303030',
+        A700: '#616161',
+      },
+      gray: {
+        50: '#FAFAFA',
+        100: '#F5F5F5',
+        200: '#EEEEEE',
+        300: '#E0E0E0',
+        400: '#BDBDBD',
+        500: '#9E9E9E',
+        DEFAULT: '#9E9E9E',
+        600: '#757575',
+        700: '#616161',
+        800: '#424242',
+        900: '#212121',
+        A100: '#D5D5D5',
+        A200: '#AAAAAA',
+        A400: '#303030',
+        A700: '#616161',
+      },
+      red: {
+        50: '#FFEBEE',
+        100: '#FFCDD2',
+        200: '#EF9A9A',
+        300: '#E57373',
+        400: '#EF5350',
+        500: '#F44336',
+        DEFAULT: '#F44336',
+        600: '#E53935',
+        700: '#D32F2F',
+        800: '#C62828',
+        900: '#B71C1C',
+        A100: '#FF8A80',
+        A200: '#FF5252',
+        A400: '#FF1744',
+        A700: '#D50000',
+      },
+      orange: {
+        50: '#FFF3E0',
+        100: '#FFE0B2',
+        200: '#FFCC80',
+        300: '#FFB74D',
+        400: '#FFA726',
+        500: '#FF9800',
+        DEFAULT: '#FF9800',
+        600: '#FB8C00',
+        700: '#F57C00',
+        800: '#EF6C00',
+        900: '#E65100',
+        A100: '#FFD180',
+        A200: '#FFAB40',
+        A400: '#FF9100',
+        A700: '#FF6D00',
+      },
+      'deep-orange': {
+        50: '#FBE9E7',
+        100: '#FFCCBC',
+        200: '#FFAB91',
+        300: '#FF8A65',
+        400: '#FF7043',
+        500: '#FF5722',
+        DEFAULT: '#FF5722',
+        600: '#F4511E',
+        700: '#E64A19',
+        800: '#D84315',
+        900: '#BF360C',
+        A100: '#FF9E80',
+        A200: '#FF6E40',
+        A400: '#FF3D00',
+        A700: '#DD2C00',
+      },
+      yellow: {
+        50: '#FFFDE7',
+        100: '#FFF9C4',
+        200: '#FFF59D',
+        300: '#FFF176',
+        400: '#FFEE58',
+        500: '#FFEB3B',
+        DEFAULT: '#FFEB3B',
+        600: '#FDD835',
+        700: '#FBC02D',
+        800: '#F9A825',
+        900: '#F57F17',
+        A100: '#FFFF8D',
+        A200: '#FFFF00',
+        A400: '#FFEA00',
+        A700: '#FFD600',
+      },
+      green: {
+        50: '#E8F5E9',
+        100: '#C8E6C9',
+        200: '#A5D6A7',
+        300: '#81C784',
+        400: '#66BB6A',
+        500: '#4CAF50',
+        DEFAULT: '#4CAF50',
+        600: '#43A047',
+        700: '#388E3C',
+        800: '#2E7D32',
+        900: '#1B5E20',
+        A100: '#B9F6CA',
+        A200: '#69F0AE',
+        A400: '#00E676',
+        A700: '#00C853',
+      },
+      'light-green': {
+        50: '#F1F8E9',
+        100: '#DCEDC8',
+        200: '#C5E1A5',
+        300: '#AED581',
+        400: '#9CCC65',
+        500: '#8BC34A',
+        DEFAULT: '#8BC34A',
+        600: '#7CB342',
+        700: '#689F38',
+        800: '#558B2F',
+        900: '#33691E',
+        A100: '#CCFF90',
+        A200: '#B2FF59',
+        A400: '#76FF03',
+        A700: '#64DD17',
+      },
+      teal: {
+        50: '#E0F2F1',
+        100: '#B2DFDB',
+        200: '#80CBC4',
+        300: '#4DB6AC',
+        400: '#26A69A',
+        500: '#009688',
+        DEFAULT: '#009688',
+        600: '#00897B',
+        700: '#00796B',
+        800: '#00695C',
+        900: '#004D40',
+        A100: '#A7FFEB',
+        A200: '#64FFDA',
+        A400: '#1DE9B6',
+        A700: '#00BFA5',
+      },
+      blue: {
+        50: '#E3F2FD',
+        100: '#BBDEFB',
+        200: '#90CAF9',
+        300: '#64B5F6',
+        400: '#42A5F5',
+        500: '#2196F3',
+        DEFAULT: '#2196F3',
+        600: '#1E88E5',
+        700: '#1976D2',
+        800: '#1565C0',
+        900: '#0D47A1',
+        A100: '#82B1FF',
+        A200: '#448AFF',
+        A400: '#2979FF',
+        A700: '#2962FF',
       },
+      'light-blue': {
+        50: '#E1F5FE',
+        100: '#B3E5FC',
+        200: '#81D4FA',
+        300: '#4FC3F7',
+        400: '#29B6F6',
+        500: '#03A9F4',
+        DEFAULT: '#03A9F4',
+        600: '#039BE5',
+        700: '#0288D1',
+        800: '#0277BD',
+        900: '#01579B',
+        A100: '#80D8FF',
+        A200: '#40C4FF',
+        A400: '#00B0FF',
+        A700: '#0091EA',
+      },
+      indigo: {
+        50: '#E8EAF6',
+        100: '#C5CAE9',
+        200: '#9FA8DA',
+        300: '#7986CB',
+        400: '#5C6BC0',
+        500: '#3F51B5',
+        DEFAULT: '#3F51B5',
+        600: '#3949AB',
+        700: '#303F9F',
+        800: '#283593',
+        900: '#1A237E',
+        A100: '#8C9EFF',
+        A200: '#536DFE',
+        A400: '#3D5AFE',
+        A700: '#304FFE',
+      },
+      purple: {
+        50: '#F3E5F5',
+        100: '#E1BEE7',
+        200: '#CE93D8',
+        300: '#BA68C8',
+        400: '#AB47BC',
+        500: '#9C27B0',
+        DEFAULT: '#9C27B0',
+        600: '#8E24AA',
+        700: '#7B1FA2',
+        800: '#6A1B9A',
+        900: '#4A148C',
+        A100: '#EA80FC',
+        A200: '#E040FB',
+        A400: '#D500F9',
+        A700: '#AA00FF',
+      },
+      'deep-purple': {
+        50: '#EDE7F6',
+        100: '#D1C4E9',
+        200: '#B39DDB',
+        300: '#9575CD',
+        400: '#7E57C2',
+        500: '#673AB7',
+        DEFAULT: '#673AB7',
+        600: '#5E35B1',
+        700: '#512DA8',
+        800: '#4527A0',
+        900: '#311B92',
+        A100: '#B388FF',
+        A200: '#7C4DFF',
+        A400: '#651FFF',
+        A700: '#6200EA',
+      },
+      pink: {
+        50: '#FCE4EC',
+        100: '#F8BBD0',
+        200: '#F48FB1',
+        300: '#F06292',
+        400: '#EC407A',
+        500: '#E91E63',
+        DEFAULT: '#E91E63',
+        600: '#D81B60',
+        700: '#C2185B',
+        800: '#AD1457',
+        900: '#880E4F',
+        A100: '#FF80AB',
+        A200: '#FF4081',
+        A400: '#F50057',
+        A700: '#C51162',
+      },
+      lime: {
+        50: '#F9FBE7',
+        100: '#F0F4C3',
+        200: '#E6EE9C',
+        300: '#DCE775',
+        400: '#D4E157',
+        500: '#CDDC39',
+        DEFAULT: '#CDDC39',
+        600: '#C0CA33',
+        700: '#AFB42B',
+        800: '#9E9D24',
+        900: '#827717',
+        A100: '#F4FF81',
+        A200: '#EEFF41',
+        A400: '#C6FF00',
+        A700: '#AEEA00',
+      },
+      amber: {
+        50: '#FFF8E1',
+        100: '#FFECB3',
+        200: '#FFE082',
+        300: '#FFD54F',
+        400: '#FFCA28',
+        500: '#FFC107',
+        DEFAULT: '#FFC107',
+        600: '#FFB300',
+        700: '#FFA000',
+        800: '#FF8F00',
+        900: '#FF6F00',
+        A100: '#FFE57F',
+        A200: '#FFD740',
+        A400: '#FFC400',
+        A700: '#FFAB00',
+      },
+      brown: {
+        50: '#EFEBE9',
+        100: '#D7CCC8',
+        200: '#BCAAA4',
+        300: '#A1887F',
+        400: '#8D6E63',
+        500: '#795548',
+        DEFAULT: '#795548',
+        600: '#6D4C41',
+        700: '#5D4037',
+        800: '#4E342E',
+        900: '#3E2723',
+        A100: '#D7CCC8',
+        A200: '#BCAAA4',
+        A400: '#8D6E63',
+        A700: '#5D4037',
+      },
+      'blue-gray': {
+        50: '#ECEFF1',
+        100: '#CFD8DC',
+        200: '#B0BEC5',
+        300: '#90A4AE',
+        400: '#78909C',
+        500: '#607D8B',
+        DEFAULT: '#607D8B',
+        600: '#546E7A',
+        700: '#455A64',
+        800: '#37474F',
+        900: '#263238',
+        A100: '#CFD8DC',
+        A200: '#B0BEC5',
+        A400: '#78909C',
+        A700: '#455A64',
+      },
+      cyan: {
+        50: '#E0F7FA',
+        100: '#B2EBF2',
+        200: '#80DEEA',
+        300: '#4DD0E1',
+        400: '#26C6DA',
+        500: '#00BCD4',
+        DEFAULT: '#00BCD4',
+        600: '#00ACC1',
+        700: '#0097A7',
+        800: '#00838F',
+        900: '#006064',
+        A100: '#84FFFF',
+        A200: '#18FFFF',
+        A400: '#00E5FF',
+        A700: '#00B8D4',
+      },
+    }),
+    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: '32rem',
+      sm: '48rem',
+      md: '64rem',
+      lg: '80rem',
+      xl: '57.6rem',
+      '2xl': '65.6rem',
+      '3xl': '76.8rem',
+      '4xl': '89.6rem',
+      '5xl': '102.4rem',
+      '6xl': '115.2rem',
+      '7xl': '128rem',
+    },
+    container: {},
+    content: {
+      none: 'none',
+    },
+    contrast: {
+      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',
+    },
+    divideColor: ({ theme }) => theme('borderColor'),
+    divideOpacity: ({ theme }) => theme('borderOpacity'),
+    divideWidth: ({ theme }) => theme('borderWidth'),
+    dropShadow: {
+      sm: '0 1px 1px rgba(0,0,0,0.05)',
+      DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'],
+      md: ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'],
+      lg: ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'],
+      xl: ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'],
+      '2xl': '0 25px 25px rgba(0, 0, 0, 0.15)',
+      none: '0 0 #0000',
+    },
+    fill: ({ theme }) => ({
+      none: 'none',
+      ...theme('colors'),
+    }),
+    flex: {
+      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%',
+    }),
+    flexGrow: {
+      0: '0',
+      DEFAULT: '1',
+    },
+    flexShrink: {
+      0: '0',
+      DEFAULT: '1',
+    },
+    fontFamily: {
+      sans: [
+        'Inter var',
+        'Roboto',
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        '"Noto Sans"',
+        'sans-serif',
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+        '"Noto Color Emoji"',
+      ],
+      serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+      mono: [
+        'ui-monospace',
+        'SFMono-Regular',
+        'Menlo',
+        'Monaco',
+        'Consolas',
+        '"Liberation Mono"',
+        '"Courier New"',
+        'monospace',
+      ],
+    },
+    fontSize: {
+      xs: '1rem',
+      sm: '1.2rem',
+      md: '1.3rem',
+      base: '1.4rem',
+      lg: '1.6rem',
+      xl: '1.8rem',
+      '2xl': '2rem',
+      '3xl': '2.4rem',
+      '4xl': '3.2rem',
+      '5xl': '3.6rem',
+      '6xl': '4rem',
+      '7xl': '4.8rem',
+      '8xl': '6.4rem',
+      '9xl': '9.6rem',
+      '10xl': '12.8rem',
+      10: ['1rem'],
+      11: ['1.1rem'],
+      12: ['1.2rem'],
+      13: ['1.3rem'],
+      14: ['1.4rem'],
+      15: ['1.5rem'],
+      16: ['1.6rem'],
+      17: ['1.7rem'],
+      18: ['1.8rem'],
+      19: ['1.9rem'],
+      20: ['2rem'],
+      24: ['2.4rem'],
+      28: ['2.8rem'],
+      32: ['3.2rem'],
+      36: ['3.6rem'],
+      40: ['4rem'],
+      44: ['4.4rem'],
+      48: ['4.8rem'],
+      52: ['5.2rem'],
+      56: ['5.6rem'],
+      60: ['6rem'],
+      64: ['6.4rem'],
+      68: ['6.8rem'],
+      72: ['7.2rem'],
+      96: ['9.6rem'],
+      128: ['12.8rem'],
     },
-    // Your existing theme configuration
+    fontWeight: {
+      thin: '100',
+      extralight: '200',
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900',
+      100: '100',
+      200: '200',
+      300: '300',
+      400: '400',
+      500: '500',
+      600: '600',
+      700: '700',
+      800: '800',
+      900: '900',
+    },
+    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%',
+    },
+    grayscale: {
+      0: '0',
+      DEFAULT: '100%',
+    },
+    gridAutoColumns: {
+      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)',
+    },
+    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',
+    },
+    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',
+    },
+    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',
+    },
+    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-full': '1 / -1',
+    },
+    gridRowEnd: {
+      auto: 'auto',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+    },
+    gridRowStart: {
+      auto: 'auto',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+    },
+    gridTemplateColumns: {
+      none: 'none',
+      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',
+      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))',
+    },
+    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',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    }),
+    hueRotate: {
+      '-180': '-180deg',
+      '-90': '-90deg',
+      '-60': '-60deg',
+      '-30': '-30deg',
+      '-15': '-15deg',
+      0: '0deg',
+      15: '15deg',
+      30: '30deg',
+      60: '60deg',
+      90: '90deg',
+      180: '180deg',
+    },
+    inset: (theme, { negative }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      full: '100%',
+      '-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%',
+    },
+    keyframes: {
+      spin: {
+        to: {
+          transform: 'rotate(360deg)',
+        },
+      },
+      ping: {
+        '75%, 100%': {
+          transform: 'scale(2)',
+          opacity: '0',
+        },
+      },
+      pulse: {
+        '50%': {
+          opacity: '.5',
+        },
+      },
+      bounce: {
+        '0%, 100%': {
+          transform: 'translateY(-25%)',
+          animationTimingFunction: 'cubic-bezier(0.8,0,1,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',
+    },
+    lineHeight: {
+      none: '1',
+      tight: '1.25',
+      snug: '1.375',
+      normal: '1.5',
+      relaxed: '1.625',
+      loose: '2',
+      3: '1.2rem',
+      4: '1.6rem',
+      5: '2rem',
+      6: '2.4rem',
+      7: '2.8rem',
+      8: '3.2rem',
+      9: '3.6rem',
+      10: '4rem',
+    },
+    listStyleType: {
+      none: 'none',
+      disc: 'disc',
+      decimal: 'decimal',
+    },
+    listStyleImage: {
+      none: 'none',
+    },
+    margin: (theme, { negative }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+    }),
+    lineClamp: {
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+    },
+    maxHeight: ({ theme }) => ({
+      none: 'none',
+      ...theme('spacing'),
+      full: '100%',
+      screen: '100vh',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+      auto: 'auto',
+    }),
+    maxWidth: (theme, { breakpoints }) => ({
+      none: 'none',
+      ...theme('spacing'),
+      full: '100%',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+      prose: '65ch',
+      ...breakpoints(theme('screens')),
+    }),
+    minHeight: ({ theme }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      full: '100%',
+      screen: '100vh',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    }),
+    minWidth: ({ theme }) => ({
+      ...theme('spacing'),
+      full: '100%',
+      min: 'min-content',
+      max: 'max-content',
+      screen: '100vw',
+      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',
+    },
+    opacity: {
+      0: '0',
+      5: '0.05',
+      10: '0.1',
+      20: '0.2',
+      25: '0.25',
+      30: '0.3',
+      40: '0.4',
+      50: '0.5',
+      60: '0.6',
+      70: '0.7',
+      75: '0.75',
+      80: '0.8',
+      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',
+    },
+    outlineColor: ({ theme }) => theme('colors'),
+    outlineOffset: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    outlineWidth: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    padding: ({ theme }) => theme('spacing'),
+    placeholderColor: ({ theme }) => theme('colors'),
+    placeholderOpacity: ({ theme }) => theme('opacity'),
+    ringColor: ({ theme }) => ({
+      DEFAULT: theme('colors.blue.500', '#3b82f6'),
+      ...theme('colors'),
+    }),
+    ringOffsetColor: ({ theme }) => theme('colors'),
+    ringOffsetWidth: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    ringOpacity: ({ theme }) => ({
+      DEFAULT: '0.5',
+      ...theme('opacity'),
+    }),
+    ringWidth: {
+      DEFAULT: '3px',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    rotate: {
+      '-180': '-180deg',
+      '-90': '-90deg',
+      '-45': '-45deg',
+      '-12': '-12deg',
+      '-6': '-6deg',
+      '-3': '-3deg',
+      '-2': '-2deg',
+      '-1': '-1deg',
+      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',
+    },
+    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',
+    },
+    screens: {
+      sm: '600px',
+      md: '960px',
+      lg: '1280px',
+      xl: '1920px',
+      print: { raw: 'print' },
+    },
+    scrollMargin: ({ theme }) => ({
+      ...theme('spacing'),
+    }),
+    scrollPadding: ({ theme }) => theme('spacing'),
+    sepia: {
+      0: '0',
+      DEFAULT: '100%',
+    },
+    skew: {
+      '-12': '-12deg',
+      '-6': '-6deg',
+      '-3': '-3deg',
+      '-2': '-2deg',
+      '-1': '-1deg',
+      0: '0deg',
+      1: '1deg',
+      2: '2deg',
+      3: '3deg',
+      6: '6deg',
+      12: '12deg',
+    },
+    space: (theme, { negative }) => ({
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+    }),
     spacing: {
       xs: '32rem',
       sm: '48rem',
@@ -90,10 +1294,209 @@ module.exports = {
       512: '51.2rem',
       640: '64rem',
     },
-    // ... (rest of your provided theme configuration)
-    plugins: [
-      require('@tailwindcss/typography')({ modifiers: ['sm', 'lg'] }),
-      require('@tailwindcss/aspect-ratio'),
-    ],
+    stroke: ({ theme }) => ({
+      none: 'none',
+      ...theme('colors'),
+    }),
+    strokeWidth: {
+      0: '0',
+      1: '1',
+      2: '2',
+    },
+    supports: {},
+    data: {},
+    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',
+    },
+    textIndent: ({ theme }) => ({
+      ...theme('spacing'),
+    }),
+    textOpacity: ({ theme }) => theme('opacity'),
+    textUnderlineOffset: {
+      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',
+    },
+    transitionDelay: {
+      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',
+    },
+    transitionProperty: {
+      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',
+    },
+    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)',
+    },
+    translate: (theme, { negative }) => ({
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      full: '100%',
+      '-1/2': '-50%',
+      '-1/3': '-33.333333%',
+      '-2/3': '-66.666667%',
+      '-1/4': '-25%',
+      '-2/4': '-50%',
+      '-3/4': '-75%',
+      '-full': '-100%',
+    }),
+    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',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    }),
+    willChange: {
+      auto: 'auto',
+      scroll: 'scroll-position',
+      contents: 'contents',
+      transform: 'transform',
+    },
+    zIndex: {
+      auto: 'auto',
+      '-1': -1,
+      0: '0',
+      10: '10',
+      20: '20',
+      30: '30',
+      40: '40',
+      50: '50',
+      99: '99',
+      999: '999',
+      9999: '9999',
+    },
+    extend: {
+      // @tailwindcss/typography
+      typography: ({ theme }) => ({
+        DEFAULT: {
+          css: {
+            fontSize: '1.4rem',
+          },
+        },
+        sm: {
+          css: {
+            fontSize: '1.2rem',
+          },
+        },
+        lg: {
+          css: {
+            fontSize: '1.6rem',
+          },
+        },
+      }),
+    },
   },
-};
\ No newline at end of file
+  variantOrder: [
+    'first',
+    'last',
+    'odd',
+    'even',
+    'visited',
+    'checked',
+    'empty',
+    'read-only',
+    'group-hover',
+    'group-focus',
+    'focus-within',
+    'hover',
+    'focus',
+    'focus-visible',
+    'active',
+    'disabled',
+  ],
+  plugins: [
+    // eslint-disable-next-line import/no-dynamic-require
+    require(path.resolve(__dirname, 'src/@fuse/tailwind/plugins/icon-size')),
+    // Other third party and/or custom plugins
+    require('@tailwindcss/typography')({ modifiers: ['sm', 'lg'] }),
+    require('@tailwindcss/aspect-ratio'),
+  ],
+};
+
+