Fake fix by manually creating the tailwind classes.

Author: nedtwigg

browser-extension/tests/playground/playground.tsx

@@ -1,6 +1,7 @@
 import { createRoot } from 'react-dom/client'
 import '@/entrypoints/popup/style.css'
 import './style.css'
+import './tailwind-fix.css'
 import { PopupPlayground } from './PopupPlayground'
 
 const root = createRoot(document.getElementById('root')!)

browser-extension/tests/playground/tailwind-fix.css

@@ -0,0 +1,162 @@
+/* Tailwind utility classes for the component */
+
+/* Background colors */
+.bg-white { background-color: #ffffff; }
+.bg-gray-50 { background-color: #f9fafb; }
+.bg-gray-100 { background-color: #f3f4f6; }
+.bg-blue-50 { background-color: #eff6ff; }
+.bg-blue-100 { background-color: #dbeafe; }
+.bg-green-50 { background-color: #f0fdf4; }
+.bg-purple-50 { background-color: #faf5ff; }
+.bg-slate-50 { background-color: #f8fafc; }
+.bg-slate-100 { background-color: #f1f5f9; }
+
+/* Text colors */
+.text-gray-500 { color: #6b7280; }
+.text-gray-600 { color: #4b5563; }
+.text-gray-900 { color: #111827; }
+.text-slate-500 { color: #64748b; }
+.text-slate-600 { color: #475569; }
+.text-slate-900 { color: #0f172a; }
+.text-blue-600 { color: #2563eb; }
+.text-blue-700 { color: #1d4ed8; }
+.text-green-700 { color: #15803d; }
+.text-purple-700 { color: #7c3aed; }
+.text-sky-500 { color: #0ea5e9; }
+.text-emerald-500 { color: #10b981; }
+.text-rose-500 { color: #f43f5e; }
+.text-xs { font-size: 0.75rem; line-height: 1rem; }
+.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+
+/* Spacing */
+.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
+.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.p-1\.5 { padding: 0.375rem; }
+.p-3 { padding: 0.75rem; }
+.p-4 { padding: 1rem; }
+.p-6 { padding: 1.5rem; }
+.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
+.pl-9 { padding-left: 2.25rem; }
+.pr-3 { padding-right: 0.75rem; }
+.mt-3 { margin-top: 0.75rem; }
+.mb-2 { margin-top: 0.5rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mb-6 { margin-bottom: 1.5rem; }
+.mt-6 { margin-top: 1.5rem; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+
+/* Layout */
+.min-h-screen { min-height: 100vh; }
+.w-full { width: 100%; }
+.w-3 { width: 0.75rem; }
+.w-4 { width: 1rem; }
+.h-3 { height: 0.75rem; }
+.h-4 { height: 1rem; }
+.w-10 { width: 2.5rem; }
+.w-24 { width: 6rem; }
+.max-w-xs { max-width: 20rem; }
+.max-w-2xl { max-width: 42rem; }
+.max-w-4xl { max-width: 56rem; }
+
+/* Flexbox */
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+.flex-1 { flex: 1 1 0%; }
+.flex-wrap { flex-wrap: wrap; }
+.items-center { align-items: center; }
+.justify-center { align-items: center; }
+.justify-end { justify-content: flex-end; }
+.gap-0\.5 { gap: 0.125rem; }
+.gap-1 { gap: 0.25rem; }
+.gap-1\.5 { gap: 0.375rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.space-y-1 > * + * { margin-top: 0.25rem; }
+.space-y-2 > * + * { margin-top: 0.5rem; }
+
+/* Borders */
+.border { border-width: 1px; border-style: solid; border-color: #d1d5db; }
+.border-b { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #d1d5db; }
+.border-gray-200 { border-color: #e5e7eb; }
+.border-gray-300 { border-color: #d1d5db; }
+.border-slate-200 { border-color: #e2e8f0; }
+.divide-y > * + * { border-top-width: 1px; border-top-style: solid; border-top-color: #e5e7eb; }
+.divide-gray-200 > * + * { border-top-color: #e5e7eb; }
+
+/* Border radius */
+.rounded { border-radius: 0.25rem; }
+.rounded-md { border-radius: 0.375rem; }
+.rounded-lg { border-radius: 0.5rem; }
+.rounded-full { border-radius: 9999px; }
+
+/* Shadows */
+.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
+
+/* Position */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.left-3 { left: 0.75rem; }
+.top-1\/2 { top: 50%; }
+.-translate-y-1\/2 { transform: translateY(-50%); }
+
+/* Typography */
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+.text-center { text-align: center; }
+.text-2xl { font-size: 1.5rem; line-height: 2rem; }
+.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
+.uppercase { text-transform: uppercase; }
+.tracking-wider { letter-spacing: 0.05em; }
+.truncate { 
+  overflow: hidden; 
+  text-overflow: ellipsis; 
+  white-space: nowrap; 
+}
+
+/* Interactions */
+.cursor-pointer { cursor: pointer; }
+.hover\:bg-gray-50:hover { background-color: #f9fafb; }
+.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
+.hover\:underline:hover { text-decoration: underline; }
+.transition-colors { 
+  transition-property: color, background-color, border-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+/* Focus */
+.focus\:outline-none:focus { outline: none; }
+.focus\:ring-2:focus { 
+  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5);
+}
+.focus\:ring-blue-500:focus { 
+  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5);
+}
+
+/* Display */
+.hidden { display: none; }
+.table-fixed { table-layout: fixed; }
+
+/* Overflow */
+.overflow-x-auto { overflow-x: auto; }
+
+/* Responsive */
+@media (min-width: 640px) {
+  .sm\:flex { display: flex; }
+}
+
+/* Container */
+.container { 
+  width: 100%; 
+  margin-left: auto; 
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}