build: upgrade Tailwind CSS from v3 to v4

- Migrate from Tailwind CSS 3.x to 4.1.15
- Replace autoprefixer with @tailwindcss/postcss 4.1.15
- Update PostCSS configuration for Tailwind v4 compatibility
- Convert globals.scss to globals.css for CSS-first configuration
- Remove legacy tailwind.config.cjs in favor of CSS-based config
- Update all component imports to use new globals.css
- Remove old.tsx.disabled file
This commit is contained in:
2025-10-22 02:11:09 -05:00
parent 66bf588647
commit 771a27da29
12 changed files with 420 additions and 1078 deletions

View File

@@ -29,7 +29,7 @@ const AbstractCard: FunctionComponent<AbstractCardProps> = ({
<div className="mb-4 overflow-clip rounded bg-zinc-800 shadow">
{header != undefined || data != undefined ? (
<div className="flex bg-zinc-700 p-2 pl-3 md:pl-5">
<div className="grow space-x-2">{header}</div>
<div className="flex grow gap-2">{header}</div>
{url != undefined ? (
<div className="pr-2">
<a href={url} target="_blank" rel="noreferrer">
@@ -96,7 +96,7 @@ const AbstractCard: FunctionComponent<AbstractCardProps> = ({
)}
</div>
{footer != null ? (
<div className="space-x-2 bg-zinc-700 p-2 pl-5">{footer}</div>
<div className="flex gap-2 bg-zinc-700 p-2 pl-5">{footer}</div>
) : null}
</div>
);

View File

@@ -23,7 +23,7 @@ const ErrorCard: FunctionComponent<ErrorCardProps> = ({
)}
>
<div className="flex">
<div className="flex-shrink-0">
<div className="shrink-0">
<XCircleIcon className="h-5 w-5 text-red-300" aria-hidden="true" />
</div>
<div className="ml-3 w-full text-sm text-red-300">
@@ -35,7 +35,7 @@ const ErrorCard: FunctionComponent<ErrorCardProps> = ({
) : null}
<div className="mt-2">
{issues != undefined ? (
<ul role="list" className="list-disc space-y-1 pl-5">
<ul role="list" className="flex list-disc flex-col gap-1 pl-5">
{issues.map((issueText, index) => (
<li key={index}>{issueText}</li>
))}

View File

@@ -146,7 +146,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
className={clsx(
"lg:py-4.5 block w-full rounded-l-md border border-transparent",
"bg-zinc-700 py-2 pl-10 pr-1.5 text-sm placeholder-zinc-400 placeholder:translate-y-2 focus:text-zinc-200",
" focus:outline-none sm:text-sm md:py-3 md:text-base lg:text-lg"
" focus:outline-hidden sm:text-sm md:py-3 md:text-base lg:text-lg"
)}
disabled={isLoading}
placeholder={placeholders[selected]}
@@ -184,8 +184,8 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
<ListboxButton
className={clsx(
"relative h-full w-full cursor-default whitespace-nowrap rounded-r-lg bg-zinc-700 py-2 pl-1 pr-10 text-right",
"text-xs focus:outline-none focus-visible:border-indigo-500 sm:text-sm md:text-base lg:text-lg",
"focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 "
"text-xs focus:outline-hidden focus-visible:border-indigo-500 sm:text-sm md:text-base lg:text-lg",
"focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 "
)}
>
{/* Fetch special text for 'auto' mode, otherwise just use the options. */}
@@ -229,7 +229,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
<ListboxOptions
className={clsx(
"scrollbar-thin absolute right-0 mt-1 max-h-60 min-w-full overflow-auto rounded-md bg-zinc-700 py-1",
"text-zinc-200 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
"text-zinc-200 shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
)}
>
{Object.entries(objectNames).map(([key, value]) => (