From 68e17e3bd7f1db53543e4035ee6a831015d06185 Mon Sep 17 00:00:00 2001
From: Seena Nair <55585488+seenanair@users.noreply.github.com>
Date: Fri, 28 Feb 2025 10:45:46 +0000
Subject: [PATCH 1/2] Bump version to 4.3.0 and update tailwind configuration
 with new color variables for Tailwind 4.0 compatibility

---
 package.json       |    2 +-
 tailwind.config.js | 1552 ++++++++++++++++++++++----------------------
 tailwind.css       |  160 ++++-
 3 files changed, 912 insertions(+), 802 deletions(-)

diff --git a/package.json b/package.json
index 9399682..636e56d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
  {
   "name": "@sanger/ui-styling",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "Module to share styles based on Sanger brand guidlines using tailwind classes",
   "main": "tailwind.config.js",
   "scripts": {
diff --git a/tailwind.config.js b/tailwind.config.js
index f3529bd..5c35b15 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,958 +1,934 @@
 module.exports = {
-  content: ["./src/**/*.html", "./src/**/*.tsx"],
+  content: ['./src/**/*.html', './src/**/*.tsx'],
   // These colours can be built dynamically so we need to make sure it's not purged
   safelist: [
-    "bg-red-200",
-    "bg-red-500",
-    "bg-red-600",
-    "hover:bg-red-300",
-    "hover:bg-red-600",
-    "hover:bg-red-700",
-    "bg-green-200",
-    "bg-green-500",
-    "bg-green-600",
-    "hover:bg-green-300",
-    "hover:bg-green-600",
-    "hover:bg-green-700",
-    "bg-indigo-200",
-    "bg-indigo-500",
-    "bg-indigo-600",
-    "hover:bg-indigo-300",
-    "hover:bg-indigo-600",
-    "hover:bg-indigo-700",
-    "bg-pink-200",
-    "bg-pink-500",
-    "bg-pink-600",
-    "hover:bg-pink-300",
-    "hover:bg-pink-600",
-    "hover:bg-pink-700",
-    "bg-yellow-200",
-    "bg-yellow-500",
-    "bg-yellow-600",
-    "hover:bg-yellow-300",
-    "hover:bg-yellow-600",
-    "hover:bg-yellow-700",
-    "bg-blue-200",
-    "bg-blue-500",
-    "bg-blue-600",
-    "hover:bg-blue-300",
-    "hover:bg-blue-600",
-    "hover:bg-blue-700",
-    "bg-purple-200",
-    "bg-purple-500",
-    "bg-purple-600",
-    "hover:bg-purple-300",
-    "hover:bg-purple-600",
-    "hover:bg-purple-700",
-    "bg-gradient-to-tr",
-    "from-green-800",
-    "to-green-700",
-    "border-green-600",
-    "bg-green-800",
-    "grid-flow-col",
-    "grid-flow-row",
-    "grid-cols-1",
-    "grid-cols-2",
-    "grid-cols-3",
-    "grid-cols-4",
-    "grid-cols-5",
-    "grid-cols-6",
-    "grid-cols-7",
-    "grid-cols-8",
-    "grid-cols-9",
-    "grid-cols-10",
-    "grid-cols-11",
-    "grid-cols-12",
-    "grid-cols-location-1",
-    "grid-cols-location-2",
-    "grid-cols-location-3",
-    "grid-cols-location-4",
-    "grid-cols-location-5",
-    "grid-cols-location-6",
-    "grid-cols-location-7",
-    "grid-cols-location-8",
-    "grid-cols-location-9",
-    "grid-cols-location-10",
-    "grid-cols-location-11",
-    "grid-cols-location-12",
-    "grid-cols-location-13",
-    "grid-cols-location-14",
-    "grid-rows-1",
-    "grid-rows-2",
-    "grid-rows-3",
-    "grid-rows-4",
-    "grid-rows-5",
-    "grid-rows-6",
-    "grid-rows-8",
-    "grid-rows-10",
-    "grid-rows-25",
-    "grid-rows-50",
+    'bg-red-200',
+    'bg-red-500',
+    'bg-red-600',
+    'hover:bg-red-300',
+    'hover:bg-red-600',
+    'hover:bg-red-700',
+    'bg-green-200',
+    'bg-green-500',
+    'bg-green-600',
+    'hover:bg-green-300',
+    'hover:bg-green-600',
+    'hover:bg-green-700',
+    'bg-indigo-200',
+    'bg-indigo-500',
+    'bg-indigo-600',
+    'hover:bg-indigo-300',
+    'hover:bg-indigo-600',
+    'hover:bg-indigo-700',
+    'bg-pink-200',
+    'bg-pink-500',
+    'bg-pink-600',
+    'hover:bg-pink-300',
+    'hover:bg-pink-600',
+    'hover:bg-pink-700',
+    'bg-yellow-200',
+    'bg-yellow-500',
+    'bg-yellow-600',
+    'hover:bg-yellow-300',
+    'hover:bg-yellow-600',
+    'hover:bg-yellow-700',
+    'bg-blue-200',
+    'bg-blue-500',
+    'bg-blue-600',
+    'hover:bg-blue-300',
+    'hover:bg-blue-600',
+    'hover:bg-blue-700',
+    'bg-purple-200',
+    'bg-purple-500',
+    'bg-purple-600',
+    'hover:bg-purple-300',
+    'hover:bg-purple-600',
+    'hover:bg-purple-700',
+    'bg-gradient-to-tr',
+    'from-green-800',
+    'to-green-700',
+    'border-green-600',
+    'bg-green-800',
+    'grid-flow-col',
+    'grid-flow-row',
+    'grid-cols-1',
+    'grid-cols-2',
+    'grid-cols-3',
+    'grid-cols-4',
+    'grid-cols-5',
+    'grid-cols-6',
+    'grid-cols-7',
+    'grid-cols-8',
+    'grid-cols-9',
+    'grid-cols-10',
+    'grid-cols-11',
+    'grid-cols-12',
+    'grid-cols-location-1',
+    'grid-cols-location-2',
+    'grid-cols-location-3',
+    'grid-cols-location-4',
+    'grid-cols-location-5',
+    'grid-cols-location-6',
+    'grid-cols-location-7',
+    'grid-cols-location-8',
+    'grid-cols-location-9',
+    'grid-cols-location-10',
+    'grid-cols-location-11',
+    'grid-cols-location-12',
+    'grid-cols-location-13',
+    'grid-cols-location-14',
+    'grid-rows-1',
+    'grid-rows-2',
+    'grid-rows-3',
+    'grid-rows-4',
+    'grid-rows-5',
+    'grid-rows-6',
+    'grid-rows-8',
+    'grid-rows-10',
+    'grid-rows-25',
+    'grid-rows-50',
   ],
 
-  prefix: "",
-  important: false,
-  separator: ":",
+  prefix: '',
+  important: true,
+  separator: ':',
   theme: {
     extend: {
       boxShadow: {
-        xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
-        outline: "0 0 0 3px rgba(66, 153, 225, 0.5)",
+        xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
+        outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
       },
     },
     screens: {
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
     },
     colors: {
-      transparent: "transparent",
-      current: "currentColor",
+      transparent: 'transparent',
+      current: 'currentColor',
 
-      black: "#000",
-      white: "#fff",
+      black: '#000',
+      white: '#fff',
 
       sp: {
-        DEFAULT: "#E91E63",
-        100: "#FDE9EF",
-        200: "#FAC7D8",
-        300: "#F6A5C1",
-        400: "#F06292",
-        500: "#E91E63",
-        600: "#D21B59",
-        700: "#8C123B",
-        800: "#690E2D",
-        900: "#46091E",
+        DEFAULT: '#E91E63',
+        100: '#FDE9EF',
+        200: '#FAC7D8',
+        300: '#F6A5C1',
+        400: '#F06292',
+        500: '#E91E63',
+        600: '#D21B59',
+        700: '#8C123B',
+        800: '#690E2D',
+        900: '#46091E',
       },
 
       // Sanger Dark Blue
       sdb: {
-        DEFAULT: "#232643",
-        100: "#7980B9",
-        200: "#5860A7",
-        300: "#464D86",
-        400: "#353A64",
-        500: "#232643",
-        600: "#121321",
+        DEFAULT: '#232643',
+        100: '#7980B9',
+        200: '#5860A7',
+        300: '#464D86',
+        400: '#353A64',
+        500: '#232643',
+        600: '#121321',
       },
 
       gray: {
-        50: "#f9fafb",
-        100: "#f7fafc",
-        200: "#edf2f7",
-        300: "#e2e8f0",
-        400: "#cbd5e0",
-        500: "#a0aec0",
-        600: "#718096",
-        700: "#4a5568",
-        800: "#2d3748",
-        900: "#1a202c",
+        50: '#f9fafb',
+        100: '#f7fafc',
+        200: '#edf2f7',
+        300: '#e2e8f0',
+        400: '#cbd5e0',
+        500: '#a0aec0',
+        600: '#718096',
+        700: '#4a5568',
+        800: '#2d3748',
+        900: '#1a202c',
       },
       red: {
-        100: "#fff5f5",
-        200: "#fed7d7",
-        300: "#feb2b2",
-        400: "#fc8181",
-        500: "#f56565",
-        600: "#e53e3e",
-        700: "#c53030",
-        800: "#9b2c2c",
-        900: "#742a2a",
+        100: '#fff5f5',
+        200: '#fed7d7',
+        300: '#feb2b2',
+        400: '#fc8181',
+        500: '#f56565',
+        600: '#e53e3e',
+        700: '#c53030',
+        800: '#9b2c2c',
+        900: '#742a2a',
       },
       orange: {
-        100: "#fffaf0",
-        200: "#feebc8",
-        300: "#fbd38d",
-        400: "#f6ad55",
-        500: "#ed8936",
-        600: "#dd6b20",
-        700: "#c05621",
-        800: "#9c4221",
-        900: "#7b341e",
+        100: '#fffaf0',
+        200: '#feebc8',
+        300: '#fbd38d',
+        400: '#f6ad55',
+        500: '#ed8936',
+        600: '#dd6b20',
+        700: '#c05621',
+        800: '#9c4221',
+        900: '#7b341e',
       },
       yellow: {
-        100: "#fffff0",
-        200: "#fefcbf",
-        300: "#faf089",
-        400: "#f6e05e",
-        500: "#ecc94b",
-        600: "#d69e2e",
-        700: "#b7791f",
-        800: "#975a16",
-        900: "#744210",
+        100: '#fffff0',
+        200: '#fefcbf',
+        300: '#faf089',
+        400: '#f6e05e',
+        500: '#ecc94b',
+        600: '#d69e2e',
+        700: '#b7791f',
+        800: '#975a16',
+        900: '#744210',
       },
       green: {
-        100: "#f0fff4",
-        200: "#c6f6d5",
-        300: "#9ae6b4",
-        400: "#68d391",
-        500: "#48bb78",
-        600: "#38a169",
-        700: "#2f855a",
-        800: "#276749",
-        900: "#22543d",
+        100: '#f0fff4',
+        200: '#c6f6d5',
+        300: '#9ae6b4',
+        400: '#68d391',
+        500: '#48bb78',
+        600: '#38a169',
+        700: '#2f855a',
+        800: '#276749',
+        900: '#22543d',
       },
       teal: {
-        100: "#e6fffa",
-        200: "#b2f5ea",
-        300: "#81e6d9",
-        400: "#4fd1c5",
-        500: "#38b2ac",
-        600: "#319795",
-        700: "#2c7a7b",
-        800: "#285e61",
-        900: "#234e52",
+        100: '#e6fffa',
+        200: '#b2f5ea',
+        300: '#81e6d9',
+        400: '#4fd1c5',
+        500: '#38b2ac',
+        600: '#319795',
+        700: '#2c7a7b',
+        800: '#285e61',
+        900: '#234e52',
       },
       blue: {
-        100: "#ebf8ff",
-        200: "#bee3f8",
-        300: "#90cdf4",
-        400: "#63b3ed",
-        500: "#4299e1",
-        600: "#3182ce",
-        700: "#2b6cb0",
-        800: "#2c5282",
-        900: "#2a4365",
+        100: '#ebf8ff',
+        200: '#bee3f8',
+        300: '#90cdf4',
+        400: '#63b3ed',
+        500: '#4299e1',
+        600: '#3182ce',
+        700: '#2b6cb0',
+        800: '#2c5282',
+        900: '#2a4365',
       },
       indigo: {
-        100: "#ebf4ff",
-        200: "#c3dafe",
-        300: "#a3bffa",
-        400: "#7f9cf5",
-        500: "#667eea",
-        600: "#5a67d8",
-        700: "#4c51bf",
-        800: "#434190",
-        900: "#3c366b",
+        100: '#ebf4ff',
+        200: '#c3dafe',
+        300: '#a3bffa',
+        400: '#7f9cf5',
+        500: '#667eea',
+        600: '#5a67d8',
+        700: '#4c51bf',
+        800: '#434190',
+        900: '#3c366b',
       },
       purple: {
-        100: "#faf5ff",
-        200: "#e9d8fd",
-        300: "#d6bcfa",
-        400: "#b794f4",
-        500: "#9f7aea",
-        600: "#805ad5",
-        700: "#6b46c1",
-        800: "#553c9a",
-        900: "#44337a",
+        100: '#faf5ff',
+        200: '#e9d8fd',
+        300: '#d6bcfa',
+        400: '#b794f4',
+        500: '#9f7aea',
+        600: '#805ad5',
+        700: '#6b46c1',
+        800: '#553c9a',
+        900: '#44337a',
       },
       pink: {
-        100: "#fff5f7",
-        200: "#fed7e2",
-        300: "#fbb6ce",
-        400: "#f687b3",
-        500: "#ed64a6",
-        600: "#d53f8c",
-        700: "#b83280",
-        800: "#97266d",
-        900: "#702459",
+        100: '#fff5f7',
+        200: '#fed7e2',
+        300: '#fbb6ce',
+        400: '#f687b3',
+        500: '#ed64a6',
+        600: '#d53f8c',
+        700: '#b83280',
+        800: '#97266d',
+        900: '#702459',
       },
       success: {
-        DEFAULT: "#68d391",
-        light: "#f0fff4",
-        dark: "#276749",
+        DEFAULT: '#68d391',
+        light: '#f0fff4',
+        dark: '#276749',
       },
       failure: {
-        DEFAULT: "#fc8181",
-        light: "#fff5f5",
-        dark: "#9b2c2c",
+        DEFAULT: '#fc8181',
+        light: '#fff5f5',
+        dark: '#9b2c2c',
       },
       warning: {
-        DEFAULT: "#f6e05e",
-        light: "#fffff0",
-        dark: "#975a16",
+        DEFAULT: '#f6e05e',
+        light: '#fffff0',
+        dark: '#975a16',
       },
     },
     spacing: {
-      px: "1px",
-      0: "0",
-      1: "0.25rem",
-      2: "0.5rem",
-      3: "0.75rem",
-      4: "1rem",
-      5: "1.25rem",
-      6: "1.5rem",
-      8: "2rem",
-      10: "2.5rem",
-      12: "3rem",
-      16: "4rem",
-      20: "5rem",
-      24: "6rem",
-      32: "8rem",
-      40: "10rem",
-      48: "12rem",
-      56: "14rem",
-      64: "16rem",
-      72: "18rem",
-      84: "21rem",
-      96: "24rem",
-    },
-    backgroundColor: (theme) => theme("colors"),
+      px: '1px',
+      0: '0',
+      1: '0.25rem',
+      2: '0.5rem',
+      3: '0.75rem',
+      4: '1rem',
+      5: '1.25rem',
+      6: '1.5rem',
+      8: '2rem',
+      10: '2.5rem',
+      12: '3rem',
+      16: '4rem',
+      20: '5rem',
+      24: '6rem',
+      32: '8rem',
+      40: '10rem',
+      48: '12rem',
+      56: '14rem',
+      64: '16rem',
+      72: '18rem',
+      84: '21rem',
+      96: '24rem',
+    },
+    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))",
-    },
-    gradientColorStops: (theme) => theme("colors"),
-    backgroundOpacity: (theme) => theme("opacity"),
+      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))',
+    },
+    gradientColorStops: (theme) => theme('colors'),
+    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',
     },
     borderColor: (theme) => ({
-      ...theme("colors"),
-      DEFAULT: theme("colors.gray.300", "currentColor"),
+      ...theme('colors'),
+      DEFAULT: theme('colors.gray.300', 'currentColor'),
     }),
-    borderOpacity: (theme) => theme("opacity"),
+    borderOpacity: (theme) => theme('opacity'),
     borderRadius: {
-      none: "0",
-      sm: "0.125rem",
-      DEFAULT: "0.25rem",
-      md: "0.375rem",
-      lg: "0.5rem",
-      full: "9999px",
+      none: '0',
+      sm: '0.125rem',
+      DEFAULT: '0.25rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      full: '9999px',
     },
     borderWidth: {
-      DEFAULT: "1px",
-      0: "0",
-      2: "2px",
-      4: "4px",
-      8: "8px",
+      DEFAULT: '1px',
+      0: '0',
+      2: '2px',
+      4: '4px',
+      8: '8px',
     },
     boxShadow: {
-      xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
-      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)",
-      outline: "0 0 0 3px rgba(66, 153, 225, 0.5)",
-      none: "none",
+      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
+      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)',
+      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
+      none: 'none',
     },
     container: {},
     cursor: {
-      auto: "auto",
-      DEFAULT: "DEFAULT",
-      pointer: "pointer",
-      wait: "wait",
-      text: "text",
-      move: "move",
-      "not-allowed": "not-allowed",
-    },
-    divideColor: (theme) => theme("borderColor"),
-    divideOpacity: (theme) => theme("borderOpacity"),
-    divideWidth: (theme) => theme("borderWidth"),
+      auto: 'auto',
+      DEFAULT: 'DEFAULT',
+      pointer: 'pointer',
+      wait: 'wait',
+      text: 'text',
+      move: 'move',
+      'not-allowed': 'not-allowed',
+    },
+    divideColor: (theme) => theme('borderColor'),
+    divideOpacity: (theme) => theme('borderOpacity'),
+    divideWidth: (theme) => theme('borderWidth'),
     fill: {
-      current: "currentColor",
+      current: 'currentColor',
     },
     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',
     },
     flexGrow: {
-      0: "0",
-      DEFAULT: "1",
+      0: '0',
+      DEFAULT: '1',
     },
     flexShrink: {
-      0: "0",
-      DEFAULT: "1",
+      0: '0',
+      DEFAULT: '1',
     },
     fontFamily: {
       sans: [
-        "Helvetica Neue",
-        "Arial",
-        "system-ui",
-        "-apple-system",
-        "BlinkMacSystemFont",
+        'Helvetica Neue',
+        'Arial',
+        'system-ui',
+        '-apple-system',
+        'BlinkMacSystemFont',
         '"Segoe UI"',
-        "Roboto",
+        'Roboto',
         '"Helvetica Neue"',
-        "Arial",
+        'Arial',
         '"Noto Sans"',
-        "sans-serif",
+        'sans-serif',
         '"Apple Color Emoji"',
         '"Segoe UI Emoji"',
         '"Segoe UI Symbol"',
         '"Noto Color Emoji"',
       ],
-      serif: ["Georgia", "Cambria", '"Times New Roman"', "Times", "serif"],
-      mono: [
-        "Menlo",
-        "Monaco",
-        "Consolas",
-        '"Liberation Mono"',
-        '"Courier New"',
-        "monospace",
-      ],
+      serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+      mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
     },
     fontSize: {
-      xs: "0.75rem",
-      sm: "0.875rem",
-      base: "1rem",
-      lg: "1.125rem",
-      xl: "1.25rem",
-      "2xl": "1.5rem",
-      "3xl": "1.875rem",
-      "4xl": "2.25rem",
-      "5xl": "3rem",
-      "6xl": "4rem",
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
     },
     fontWeight: {
-      hairline: "100",
-      thin: "200",
-      light: "300",
-      normal: "400",
-      medium: "500",
-      semibold: "600",
-      bold: "700",
-      extrabold: "800",
-      black: "900",
+      hairline: '100',
+      thin: '200',
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900',
     },
     height: (theme) => ({
-      auto: "auto",
-      ...theme("spacing"),
-      full: "100%",
-      screen: "100vh",
+      auto: 'auto',
+      ...theme('spacing'),
+      full: '100%',
+      screen: '100vh',
     }),
     inset: {
-      0: "0",
-      auto: "auto",
+      0: '0',
+      auto: 'auto',
     },
     letterSpacing: {
-      tighter: "-0.05em",
-      tight: "-0.025em",
-      normal: "0",
-      wide: "0.025em",
-      wider: "0.05em",
-      widest: "0.1em",
+      tighter: '-0.05em',
+      tight: '-0.025em',
+      normal: '0',
+      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",
-    },
-    margin: (theme, { negative }) => ({
-      auto: "auto",
-      ...theme("spacing"),
-      ...negative(theme("spacing")),
+      none: 'none',
+      disc: 'disc',
+      decimal: 'decimal',
+    },
+    margin: (theme) => ({
+      auto: 'auto',
+      ...theme('spacing'),
     }),
     maxHeight: {
-      full: "100%",
-      screen: "100vh",
-    },
-    maxWidth: (theme, { breakpoints }) => ({
-      none: "none",
-      xs: "20rem",
-      sm: "24rem",
-      md: "28rem",
-      lg: "32rem",
-      xl: "36rem",
-      "2xl": "42rem",
-      "3xl": "48rem",
-      "4xl": "56rem",
-      "5xl": "64rem",
-      "6xl": "72rem",
-      full: "100%",
-      ...breakpoints(theme("screens")),
+      full: '100%',
+      screen: '100vh',
+    },
+    maxWidth: (theme) => ({
+      none: 'none',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      full: '100%',
     }),
     minHeight: {
-      0: "0",
-      full: "100%",
-      screen: "100vh",
+      0: '0',
+      full: '100%',
+      screen: '100vh',
     },
     minWidth: {
-      0: "0",
-      full: "100%",
+      0: '0',
+      full: '100%',
     },
     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",
-      25: "0.25",
-      50: "0.5",
-      75: "0.75",
-      100: "1",
+      0: '0',
+      25: '0.25',
+      50: '0.5',
+      75: '0.75',
+      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",
-    },
-    padding: (theme) => theme("spacing"),
-    placeholderColor: (theme) => theme("colors"),
-    placeholderOpacity: (theme) => theme("opacity"),
-    space: (theme, { negative }) => ({
-      ...theme("spacing"),
-      ...negative(theme("spacing")),
+      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',
+    },
+    padding: (theme) => theme('spacing'),
+    placeholderColor: (theme) => theme('colors'),
+    placeholderOpacity: (theme) => theme('opacity'),
+    space: (theme) => ({
+      ...theme('spacing'),
     }),
     stroke: {
-      current: "currentColor",
+      current: 'currentColor',
     },
     strokeWidth: {
-      0: "0",
-      1: "1",
-      2: "2",
+      0: '0',
+      1: '1',
+      2: '2',
     },
-    textColor: (theme) => theme("colors"),
-    textOpacity: (theme) => theme("opacity"),
+    textColor: (theme) => theme('colors'),
+    textOpacity: (theme) => theme('opacity'),
     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",
+      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',
     }),
     zIndex: {
-      auto: "auto",
-      0: "0",
-      10: "10",
-      20: "20",
-      30: "30",
-      40: "40",
-      50: "50",
-    },
-    gap: (theme) => theme("spacing"),
+      auto: 'auto',
+      0: '0',
+      10: '10',
+      20: '20',
+      30: '30',
+      40: '40',
+      50: '50',
+    },
+    gap: (theme) => theme('spacing'),
     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))",
+      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))',
 
-      "location-1": "repeat(1, minmax(180px, 220px))",
-      "location-2": "repeat(2, minmax(180px, 220px))",
-      "location-3": "repeat(3, minmax(180px, 220px))",
-      "location-4": "repeat(4, minmax(180px, 220px))",
-      "location-5": "repeat(5, minmax(180px, 220px))",
-      "location-6": "repeat(6, minmax(180px, 220px))",
-      "location-7": "repeat(7, minmax(180px, 220px))",
-      "location-8": "repeat(8, minmax(180px, 220px))",
-      "location-9": "repeat(9, minmax(180px, 220px))",
-      "location-10": "repeat(10, minmax(180px, 220px))",
-      "location-11": "repeat(11, minmax(180px, 220px))",
-      "location-12": "repeat(12, minmax(180px, 220px))",
-      "location-13": "repeat(13, minmax(180px, 220px))",
-      "location-14": "repeat(14, minmax(180px, 220px))",
+      'location-1': 'repeat(1, minmax(180px, 220px))',
+      'location-2': 'repeat(2, minmax(180px, 220px))',
+      'location-3': 'repeat(3, minmax(180px, 220px))',
+      'location-4': 'repeat(4, minmax(180px, 220px))',
+      'location-5': 'repeat(5, minmax(180px, 220px))',
+      'location-6': 'repeat(6, minmax(180px, 220px))',
+      'location-7': 'repeat(7, minmax(180px, 220px))',
+      'location-8': 'repeat(8, minmax(180px, 220px))',
+      'location-9': 'repeat(9, minmax(180px, 220px))',
+      'location-10': 'repeat(10, minmax(180px, 220px))',
+      'location-11': 'repeat(11, minmax(180px, 220px))',
+      'location-12': 'repeat(12, minmax(180px, 220px))',
+      'location-13': 'repeat(13, minmax(180px, 220px))',
+      'location-14': 'repeat(14, minmax(180px, 220px))',
     },
     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",
+      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',
     },
     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',
     },
     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',
     },
     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))",
-      10: "repeat(10, minmax(0, 1fr))",
-      25: "repeat(25, minmax(0, 1fr))",
-      50: "repeat(50, minmax(0, 1fr))",
+      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))',
+      10: 'repeat(10, minmax(0, 1fr))',
+      25: 'repeat(25, minmax(0, 1fr))',
+      50: 'repeat(50, minmax(0, 1fr))',
     },
     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",
+      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',
     },
     gridRowStart: {
-      auto: "auto",
-      1: "1",
-      2: "2",
-      3: "3",
-      4: "4",
-      5: "5",
-      6: "6",
-      7: "7",
+      auto: 'auto',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
     },
     gridRowEnd: {
-      auto: "auto",
-      1: "1",
-      2: "2",
-      3: "3",
-      4: "4",
-      5: "5",
-      6: "6",
-      7: "7",
+      auto: 'auto',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
     },
     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',
     },
     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',
     },
     rotate: {
-      "-180": "-180deg",
-      "-90": "-90deg",
-      "-45": "-45deg",
-      0: "0",
-      45: "45deg",
-      90: "90deg",
-      180: "180deg",
-    },
-    translate: (theme, { negative }) => ({
-      ...theme("spacing"),
-      ...negative(theme("spacing")),
-      "-full": "-100%",
-      "-1/2": "-50%",
-      "1/2": "50%",
-      full: "100%",
+      '-180': '-180deg',
+      '-90': '-90deg',
+      '-45': '-45deg',
+      0: '0',
+      45: '45deg',
+      90: '90deg',
+      180: '180deg',
+    },
+    translate: (theme) => ({
+      ...theme('spacing'),
+      '-full': '-100%',
+      '-1/2': '-50%',
+      '1/2': '50%',
+      full: '100%',
     }),
     skew: {
-      "-12": "-12deg",
-      "-6": "-6deg",
-      "-3": "-3deg",
-      0: "0",
-      3: "3deg",
-      6: "6deg",
-      12: "12deg",
+      '-12': '-12deg',
+      '-6': '-6deg',
+      '-3': '-3deg',
+      0: '0',
+      3: '3deg',
+      6: '6deg',
+      12: '12deg',
     },
     transitionProperty: {
-      none: "none",
-      all: "all",
+      none: 'none',
+      all: 'all',
       DEFAULT:
-        "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
-      colors: "background-color, border-color, color, fill, stroke",
-      opacity: "opacity",
-      shadow: "box-shadow",
-      transform: "transform",
+        'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
+      colors: 'background-color, border-color, color, fill, stroke',
+      opacity: 'opacity',
+      shadow: 'box-shadow',
+      transform: 'transform',
     },
     transitionTimingFunction: {
-      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)",
+      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)',
     },
     transitionDuration: {
-      75: "75ms",
-      100: "100ms",
-      150: "150ms",
-      200: "200ms",
-      300: "300ms",
-      500: "500ms",
-      700: "700ms",
-      1000: "1000ms",
+      75: '75ms',
+      100: '100ms',
+      150: '150ms',
+      200: '200ms',
+      300: '300ms',
+      500: '500ms',
+      700: '700ms',
+      1000: '1000ms',
     },
     transitionDelay: {
-      75: "75ms",
-      100: "100ms",
-      150: "150ms",
-      200: "200ms",
-      300: "300ms",
-      500: "500ms",
-      700: "700ms",
-      1000: "1000ms",
+      75: '75ms',
+      100: '100ms',
+      150: '150ms',
+      200: '200ms',
+      300: '300ms',
+      500: '500ms',
+      700: '700ms',
+      1000: '1000ms',
     },
     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',
     },
     keyframes: {
       spin: {
-        to: { transform: "rotate(360deg)" },
+        to: { 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)',
         },
       },
     },
   },
   variants: {
-    accessibility: ["responsive", "focus"],
-    alignContent: ["responsive"],
-    alignItems: ["responsive"],
-    alignSelf: ["responsive"],
-    appearance: ["responsive"],
-    backgroundAttachment: ["responsive"],
-    backgroundClip: ["responsive"],
-    backgroundColor: [
-      "responsive",
-      "hover",
-      "focus",
-      "active",
-      "odd",
-      "even",
-      "disabled",
-    ],
-    backgroundImage: ["responsive"],
-    gradientColorStops: ["responsive", "hover", "focus"],
-    backgroundOpacity: ["responsive", "hover", "focus"],
-    backgroundPosition: ["responsive"],
-    backgroundRepeat: ["responsive"],
-    backgroundSize: ["responsive"],
-    borderCollapse: ["responsive"],
-    borderColor: ["responsive", "hover", "focus"],
-    borderOpacity: ["responsive", "hover", "focus"],
-    borderRadius: ["responsive"],
-    borderStyle: ["responsive"],
-    borderWidth: ["responsive"],
-    boxShadow: ["responsive", "hover", "focus"],
-    boxSizing: ["responsive"],
-    container: ["responsive"],
-    cursor: ["responsive", "disabled"],
-    display: ["responsive", "group-hover"],
-    divideColor: ["responsive"],
-    divideOpacity: ["responsive"],
-    divideStyle: ["responsive"],
-    divideWidth: ["responsive"],
-    fill: ["responsive"],
-    flex: ["responsive"],
-    flexDirection: ["responsive"],
-    flexGrow: ["responsive"],
-    flexShrink: ["responsive"],
-    flexWrap: ["responsive"],
-    float: ["responsive"],
-    clear: ["responsive"],
-    fontFamily: ["responsive"],
-    fontSize: ["responsive"],
-    fontSmoothing: ["responsive"],
-    fontVariantNumeric: ["responsive"],
-    fontStyle: ["responsive"],
-    fontWeight: ["responsive", "hover", "focus"],
-    height: ["responsive"],
-    inset: ["responsive"],
-    justifyContent: ["responsive"],
-    justifyItems: ["responsive"],
-    justifySelf: ["responsive"],
-    letterSpacing: ["responsive"],
-    lineHeight: ["responsive"],
-    listStylePosition: ["responsive"],
-    listStyleType: ["responsive"],
-    margin: ["responsive"],
-    maxHeight: ["responsive"],
-    maxWidth: ["responsive"],
-    minHeight: ["responsive"],
-    minWidth: ["responsive"],
-    objectFit: ["responsive"],
-    objectPosition: ["responsive"],
-    opacity: ["responsive", "hover", "focus", "disabled"],
-    order: ["responsive"],
-    outline: ["responsive", "focus"],
-    overflow: ["responsive"],
-    overscrollBehavior: ["responsive"],
-    padding: ["responsive"],
-    placeContent: ["responsive"],
-    placeItems: ["responsive"],
-    placeSelf: ["responsive"],
-    placeholderColor: ["responsive", "focus"],
-    placeholderOpacity: ["responsive", "focus"],
-    pointerEvents: ["responsive"],
-    position: ["responsive"],
-    resize: ["responsive"],
-    space: ["responsive"],
-    stroke: ["responsive"],
-    strokeWidth: ["responsive"],
-    tableLayout: ["responsive"],
-    textAlign: ["responsive"],
-    textColor: ["responsive", "hover", "focus", "disabled"],
-    textOpacity: ["responsive", "hover", "focus"],
-    textDecoration: ["responsive", "hover", "focus"],
-    textTransform: ["responsive"],
-    userSelect: ["responsive"],
-    verticalAlign: ["responsive"],
-    visibility: ["responsive"],
-    whitespace: ["responsive"],
-    width: ["responsive"],
-    wordBreak: ["responsive"],
-    zIndex: ["responsive"],
-    gap: ["responsive"],
-    gridAutoFlow: ["responsive"],
-    gridTemplateColumns: ["responsive"],
-    gridColumn: ["responsive"],
-    gridColumnStart: ["responsive"],
-    gridColumnEnd: ["responsive"],
-    gridTemplateRows: ["responsive"],
-    gridRow: ["responsive"],
-    gridRowStart: ["responsive"],
-    gridRowEnd: ["responsive"],
-    transform: ["responsive"],
-    transformOrigin: ["responsive"],
-    scale: ["responsive", "hover", "focus"],
-    rotate: ["responsive", "hover", "focus"],
-    translate: ["responsive", "hover", "focus"],
-    skew: ["responsive", "hover", "focus"],
-    transitionProperty: ["responsive"],
-    transitionTimingFunction: ["responsive"],
-    transitionDuration: ["responsive"],
-    transitionDelay: ["responsive"],
-    animation: ["responsive"],
+    accessibility: ['responsive', 'focus'],
+    alignContent: ['responsive'],
+    alignItems: ['responsive'],
+    alignSelf: ['responsive'],
+    appearance: ['responsive'],
+    backgroundAttachment: ['responsive'],
+    backgroundClip: ['responsive'],
+    backgroundColor: ['responsive', 'hover', 'focus', 'active', 'odd', 'even', 'disabled'],
+    backgroundImage: ['responsive'],
+    gradientColorStops: ['responsive', 'hover', 'focus'],
+    backgroundOpacity: ['responsive', 'hover', 'focus'],
+    backgroundPosition: ['responsive'],
+    backgroundRepeat: ['responsive'],
+    backgroundSize: ['responsive'],
+    borderCollapse: ['responsive'],
+    borderColor: ['responsive', 'hover', 'focus'],
+    borderOpacity: ['responsive', 'hover', 'focus'],
+    borderRadius: ['responsive'],
+    borderStyle: ['responsive'],
+    borderWidth: ['responsive'],
+    boxShadow: ['responsive', 'hover', 'focus'],
+    boxSizing: ['responsive'],
+    container: ['responsive'],
+    cursor: ['responsive', 'disabled'],
+    display: ['responsive', 'group-hover'],
+    divideColor: ['responsive'],
+    divideOpacity: ['responsive'],
+    divideStyle: ['responsive'],
+    divideWidth: ['responsive'],
+    fill: ['responsive'],
+    flex: ['responsive'],
+    flexDirection: ['responsive'],
+    flexGrow: ['responsive'],
+    flexShrink: ['responsive'],
+    flexWrap: ['responsive'],
+    float: ['responsive'],
+    clear: ['responsive'],
+    fontFamily: ['responsive'],
+    fontSize: ['responsive'],
+    fontSmoothing: ['responsive'],
+    fontVariantNumeric: ['responsive'],
+    fontStyle: ['responsive'],
+    fontWeight: ['responsive', 'hover', 'focus'],
+    height: ['responsive'],
+    inset: ['responsive'],
+    justifyContent: ['responsive'],
+    justifyItems: ['responsive'],
+    justifySelf: ['responsive'],
+    letterSpacing: ['responsive'],
+    lineHeight: ['responsive'],
+    listStylePosition: ['responsive'],
+    listStyleType: ['responsive'],
+    margin: ['responsive'],
+    maxHeight: ['responsive'],
+    maxWidth: ['responsive'],
+    minHeight: ['responsive'],
+    minWidth: ['responsive'],
+    objectFit: ['responsive'],
+    objectPosition: ['responsive'],
+    opacity: ['responsive', 'hover', 'focus', 'disabled'],
+    order: ['responsive'],
+    outline: ['responsive', 'focus'],
+    overflow: ['responsive'],
+    overscrollBehavior: ['responsive'],
+    padding: ['responsive'],
+    placeContent: ['responsive'],
+    placeItems: ['responsive'],
+    placeSelf: ['responsive'],
+    placeholderColor: ['responsive', 'focus'],
+    placeholderOpacity: ['responsive', 'focus'],
+    pointerEvents: ['responsive'],
+    position: ['responsive'],
+    resize: ['responsive'],
+    space: ['responsive'],
+    stroke: ['responsive'],
+    strokeWidth: ['responsive'],
+    tableLayout: ['responsive'],
+    textAlign: ['responsive'],
+    textColor: ['responsive', 'hover', 'focus', 'disabled'],
+    textOpacity: ['responsive', 'hover', 'focus'],
+    textDecoration: ['responsive', 'hover', 'focus'],
+    textTransform: ['responsive'],
+    userSelect: ['responsive'],
+    verticalAlign: ['responsive'],
+    visibility: ['responsive'],
+    whitespace: ['responsive'],
+    width: ['responsive'],
+    wordBreak: ['responsive'],
+    zIndex: ['responsive'],
+    gap: ['responsive'],
+    gridAutoFlow: ['responsive'],
+    gridTemplateColumns: ['responsive'],
+    gridColumn: ['responsive'],
+    gridColumnStart: ['responsive'],
+    gridColumnEnd: ['responsive'],
+    gridTemplateRows: ['responsive'],
+    gridRow: ['responsive'],
+    gridRowStart: ['responsive'],
+    gridRowEnd: ['responsive'],
+    transform: ['responsive'],
+    transformOrigin: ['responsive'],
+    scale: ['responsive', 'hover', 'focus'],
+    rotate: ['responsive', 'hover', 'focus'],
+    translate: ['responsive', 'hover', 'focus'],
+    skew: ['responsive', 'hover', 'focus'],
+    transitionProperty: ['responsive'],
+    transitionTimingFunction: ['responsive'],
+    transitionDuration: ['responsive'],
+    transitionDelay: ['responsive'],
+    animation: ['responsive'],
   },
   corePlugins: {},
   plugins: [],
-};
+}
diff --git a/tailwind.css b/tailwind.css
index d1b8a2e..37dd5e5 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -1,33 +1,167 @@
+@import 'tailwindcss';
 
-svg.logo {
+@config './tailwind.config.js';
+
+@theme {
+  --color-purple-100: oklch(97.68% 0.0142 308.3);
+  --color-purple-200: oklch(90.73% 0.053 306.09);
+  --color-purple-300: oklch(83.8% 0.0893 303.68);
+  --color-purple-400: oklch(73.58% 0.1394 299.78);
+  --color-purple-500: oklch(66.37% 0.1634 296.96);
+  --color-purple-600: oklch(56.89% 0.1812 294.13);
+  --color-purple-700: oklch(59.85% 0.2294 296.96);
+  --color-purple-800: oklch(56.91% 0.2541 296.96);
+  --color-purple-900: oklch(54.56% 0.2787 296.96);
+  --color-gray-50: oklch(98.46% 0.0017 247.84);
+  --color-gray-100: oklch(98.34% 0.0042 236.5);
+  --color-gray-200: oklch(95.88% 0.0086 247.92);
+  --color-gray-300: oklch(92.88% 0.0126 255.51);
+  --color-gray-400: oklch(86.87% 0.0187 250.61);
+  --color-gray-500: oklch(74.57% 0.0304 254.72);
+  --color-gray-600: oklch(59.56% 0.0381 257.87);
+  --color-gray-700: oklch(44.74% 0.0343 261.32);
+  --color-gray-800: oklch(33.51% 0.0331 260.91);
+  --color-gray-900: oklch(24.33% 0.0247 263.95);
+  --color-sp: oklch(60.62% 0.2298 9.63);
+  --color-sp-100: oklch(95.17% 0.0231 357.35);
+  --color-sp-200: oklch(87.92% 0.0617 356.53);
+  --color-sp-300: oklch(80.86% 0.1013 357.25);
+  --color-sp-400: oklch(68.78% 0.1797 1.96);
+  --color-sp-500: oklch(60.62% 0.2298 9.63);
+  --color-sp-600: oklch(56.12% 0.212 9.52);
+  --color-sp-700: oklch(41.85% 0.155 8.77);
+  --color-sp-800: oklch(34.34% 0.1241 7.48);
+  --color-sp-900: oklch(26.34% 0.0913 5.95);
+  /* Sanger dark blue */
+  --color-sdb: oklch(28.09% 0.0533 277.89);
+  --color-sdb-100: oklch(61.69% 0.0865 278.16);
+  --color-sdb-200: oklch(51.58% 0.1119 276.86);
+  --color-sdb-300: oklch(44.18% 0.0936 276.57);
+  --color-sdb-400: oklch(36.48% 0.0724 277.03);
+  --color-sdb-500: oklch(28.09% 0.0533 277.89);
+  --color-sdb-600: oklch(19.32% 0.0283 280.26);
+  
+  --color-red-100: oklch(97.79% 0.0107 17.34);
+  --color-red-200: oklch(91.2% 0.0437 17.98);
+  --color-red-300: oklch(83.54% 0.0892 19.12);
+  --color-red-400: oklch(74.21% 0.1503 21.35);
+  --color-red-500: oklch(68.82% 0.1776 22.95);
+  --color-red-600: oklch(61.37% 0.2039 25.56);
+  --color-red-700: oklch(54.41% 0.1859 25.95);
+  --color-red-800: oklch(46.5% 0.147 24.94);
+  --color-red-900: oklch(39.37% 0.1047 23.19);
+  --color-orange-100: oklch(98.62% 0.0142 84.58);
+  --color-orange-200: oklch(94.65% 0.0501 82.8);
+  --color-orange-300: oklch(88.57% 0.0986 80.9);
+  --color-orange-400: oklch(80.12% 0.1343 68.79);
+  --color-orange-500: oklch(72.44% 0.1534 56.07);
+  --color-orange-600: oklch(65.33% 0.1638 48.41);
+  --color-orange-700: oklch(57.92% 0.1504 43.81);
+  --color-orange-800: oklch(49.37% 0.1289 39.62);
+  --color-orange-900: oklch(41.85% 0.105 37.68);
+  --color-yellow-100: oklch(99.6% 0.0196 106.75);
+  --color-yellow-200: oklch(97.81% 0.0777 106.18);
+  --color-yellow-300: oklch(94.16% 0.1253 103.63);
+  --color-yellow-400: oklch(90.08% 0.1496 99.71);
+  --color-yellow-500: oklch(84.37% 0.1458 93.31);
+  --color-yellow-600: oklch(73.43% 0.1377 80.01);
+  --color-yellow-700: oklch(62.64% 0.1248 70.45);
+  --color-yellow-800: oklch(52.6% 0.1111 62.59);
+  --color-yellow-900: oklch(43.1% 0.092 59.95);
+  --color-green-100: oklch(98.59% 0.0213 154.14);
+  --color-green-200: oklch(93.08% 0.0664 154.9);
+  --color-green-300: oklch(86.19% 0.1028 154.84);
+  --color-green-400: oklch(78.6% 0.1379 154.52);
+  --color-green-500: oklch(70.96% 0.1434 154.53);
+  --color-green-600: oklch(63.42% 0.1283 156.2);
+  --color-green-700: oklch(55.32% 0.1067 157.99);
+  --color-green-800: oklch(46.35% 0.0823 160.17);
+  --color-green-900: oklch(40.43% 0.0671 161.21);
+  --color-teal-100: oklch(98.05% 0.0268 182.42);
+  --color-teal-200: oklch(92.25% 0.0685 183.53);
+  --color-teal-300: oklch(85.98% 0.0972 184.89);
+  --color-teal-400: oklch(78.64% 0.1143 186.56);
+  --color-teal-500: oklch(69.64% 0.1053 190.24);
+  --color-teal-600: oklch(61.88% 0.0914 193.16);
+  --color-teal-700: oklch(53.29% 0.0748 196.34);
+  --color-teal-800: oklch(44.7% 0.057 200.25);
+  --color-teal-900: oklch(39.51% 0.048 203.48);
+  --color-blue-100: oklch(97.15% 0.0167 230.9);
+  --color-blue-200: oklch(89.6% 0.0484 232.92);
+  --color-blue-300: oklch(82.08% 0.0833 237.18);
+  --color-blue-400: oklch(73.92% 0.1154 242.05);
+  --color-blue-500: oklch(66.26% 0.1358 246.81);
+  --color-blue-600: oklch(59.46% 0.1398 250.3);
+  --color-blue-700: oklch(52.41% 0.1259 252.32);
+  --color-blue-800: oklch(43.46% 0.091 255.18);
+  --color-blue-900: oklch(37.93% 0.0663 256.38);
+  --color-indigo-100: oklch(96.36% 0.0176 253.34);
+  --color-indigo-200: oklch(88.3% 0.0557 259.3);
+  --color-indigo-300: oklch(80.52% 0.0895 264.78);
+  --color-indigo-400: oklch(70.87% 0.1346 269.11);
+  --color-indigo-500: oklch(62.71% 0.1638 271.53);
+  --color-indigo-600: oklch(56.31% 0.1717 274.55);
+  --color-indigo-700: oklch(49.42% 0.1693 276.3);
+  --color-indigo-800: oklch(42.15% 0.1269 280.6);
+  --color-indigo-900: oklch(36.68% 0.0889 286.32);
+  --color-pink-100: oklch(97.85% 0.011 3.49);
+  --color-pink-200: oklch(91.51% 0.0456 359.18);
+  --color-pink-300: oklch(84.69% 0.0852 356.45);
+  --color-pink-400: oklch(75.65% 0.143 355.9);
+  --color-pink-500: oklch(69.23% 0.1817 352.86);
+  --color-pink-600: oklch(60.7% 0.1984 353.2);
+  --color-pink-700: oklch(54.42% 0.1853 349.34);
+  --color-pink-800: oklch(47.11% 0.1644 346.74);
+  --color-pink-900: oklch(39.5% 0.1244 341.71);
+}
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: #e2e8f0;
+  }
+}
+
+@layer base {
+  svg.logo {
     width: 300px;
     height: 300px;
-}
+  }
 
-/* Animations */
-svg.logo.loading rect {
+  /* Animations */
+  svg.logo.loading rect {
     animation: sm-pulse;
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
     animation-direction: alternate;
     animation-duration: 0.6s;
-}
+  }
 
-svg.logo.loading rect:nth-child(odd) {
+  svg.logo.loading rect:nth-child(odd) {
     animation-delay: 0.6s;
-}
+  }
 
-svg.logo.loading rect:nth-child(3n+1) {
+  svg.logo.loading rect:nth-child(3n + 1) {
     animation-delay: 0.3s;
-}
+  }
 
-@keyframes sm-pulse {
+  @keyframes sm-pulse {
     from {
-        opacity: 1
+      opacity: 1;
     }
     to {
-        opacity: 0.5;
+      opacity: 0.5;
     }
+  }
 }
 
-@import "tailwindcss"

From 05572706d69d7193c86303d18dc9f544122c2abc Mon Sep 17 00:00:00 2001
From: Seena Nair <55585488+seenanair@users.noreply.github.com>
Date: Fri, 28 Feb 2025 10:49:45 +0000
Subject: [PATCH 2/2] Update tailwind.css

---
 tailwind.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tailwind.css b/tailwind.css
index 37dd5e5..3f5d9fb 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -2,6 +2,7 @@
 
 @config './tailwind.config.js';
 
+/* Defining Oklab colorspace in Tailwind 4.0 */
 @theme {
   --color-purple-100: oklch(97.68% 0.0142 308.3);
   --color-purple-200: oklch(90.73% 0.053 306.09);