Merge pull request #20 from Jeff-Emmett/new-website

fix tailwind

client/tailwind.config.ts

@@ -1,13 +1,61 @@
 import type { Config } from "tailwindcss";
-import path from "path";
 
 export default {
   darkMode: ["class"],
   content: [
-    path.resolve(__dirname, "index.html"),
-    path.resolve(__dirname, "src/**/*.{js,jsx,ts,tsx}"),
-    path.resolve(__dirname, "src/**/*.{html,js,jsx,ts,tsx}"),
-    path.resolve(__dirname, "../**/*.{js,jsx,ts,tsx}"),
+    "./index.html",
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "../**/*.{js,jsx,ts,tsx}",
+  ],
+  safelist: [
+    // Layout
+    'container', 'flex', 'grid', 'block', 'inline-block', 'hidden',
+    // Spacing
+    'p-0', 'p-1', 'p-2', 'p-3', 'p-4', 'p-5', 'p-6', 'p-8', 'p-10', 'p-12', 'p-16', 'p-20',
+    'px-0', 'px-1', 'px-2', 'px-3', 'px-4', 'px-5', 'px-6', 'px-8', 'px-10', 'px-12', 'px-16', 'px-20',
+    'py-0', 'py-1', 'py-2', 'py-3', 'py-4', 'py-5', 'py-6', 'py-8', 'py-10', 'py-12', 'py-16', 'py-20',
+    'm-0', 'm-1', 'm-2', 'm-3', 'm-4', 'm-5', 'm-6', 'm-8', 'm-10', 'm-12', 'm-16', 'm-20',
+    'mx-auto', 'my-auto',
+    // Colors
+    'bg-white', 'bg-black', 'bg-gray-50', 'bg-gray-100', 'bg-gray-200', 'bg-gray-300',
+    'text-white', 'text-black', 'text-gray-500', 'text-gray-600', 'text-gray-700', 'text-gray-800', 'text-gray-900',
+    'bg-teal', 'bg-purple', 'bg-rose', 'text-teal', 'text-purple', 'text-rose',
+    'bg-teal-light', 'bg-purple-light', 'bg-rose-light',
+    // Typography
+    'text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl',
+    'font-normal', 'font-medium', 'font-semibold', 'font-bold',
+    'text-left', 'text-center', 'text-right',
+    // Flexbox
+    'flex-row', 'flex-col', 'items-start', 'items-center', 'items-end', 'items-stretch',
+    'justify-start', 'justify-center', 'justify-end', 'justify-between', 'justify-around',
+    'gap-1', 'gap-2', 'gap-3', 'gap-4', 'gap-5', 'gap-6', 'gap-8', 'gap-10', 'gap-12',
+    // Grid
+    'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4',
+    // Width/Height
+    'w-full', 'w-auto', 'w-1/2', 'w-1/3', 'w-2/3', 'w-1/4', 'w-3/4',
+    'h-full', 'h-auto', 'h-screen', 'h-svh',
+    'max-w-sm', 'max-w-md', 'max-w-lg', 'max-w-xl', 'max-w-2xl', 'max-w-3xl', 'max-w-4xl', 'max-w-5xl', 'max-w-7xl',
+    // Borders
+    'border', 'border-0', 'border-2', 'border-4',
+    'rounded', 'rounded-sm', 'rounded-md', 'rounded-lg', 'rounded-xl', 'rounded-full',
+    'border-gray-200', 'border-gray-300', 'border-teal', 'border-purple', 'border-rose',
+    // Shadows
+    'shadow-sm', 'shadow', 'shadow-md', 'shadow-lg', 'shadow-xl',
+    // Position
+    'relative', 'absolute', 'fixed', 'sticky',
+    'top-0', 'top-1/2', 'top-full',
+    'bottom-0', 'bottom-1/2',
+    'left-0', 'left-1/2',
+    'right-0', 'right-1/2',
+    'inset-0', 'inset-x-0', 'inset-y-0',
+    // Z-index
+    'z-10', 'z-20', 'z-50',
+    // Overflow
+    'overflow-hidden', 'overflow-auto', 'overflow-x-auto', 'overflow-y-auto',
+    // Display
+    'block', 'inline-block', 'inline', 'flex', 'inline-flex', 'grid', 'hidden',
+    // Responsive prefixes
+    'sm:', 'md:', 'lg:', 'xl:', '2xl:',
   ],
   theme: {
     extend: {