Upgrade: Tailwind v4 (#5246)

* temp: move tailwind calls out of the layer

* temp: ts tailwind config

* upgrade: Tailwind v4
This got a little out of hand.
Had to add a relative reference to the stylesheet in any component that uses @apply instead of the utility classes directly.

* upgrade: bg-opacity is now a modifier

* fix: Classic menu buttons assume a border

* Update test expectations [skip ci]

* fix: New preflight removal pattern

* fix: Skeletons don't have skin

* Update test expectations [skip ci]

* fix: Missing @reference

* [auto-fix] Apply ESLint and Prettier fixes

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
Alexander Brown
2025-09-03 12:37:43 -07:00
committed by GitHub
parent caee3832a5
commit 85017dbba0
263 changed files with 640 additions and 488 deletions

View File

@@ -6,7 +6,7 @@
:key="createNodeDefKey(nodeDef)"
class="border rounded-lg p-4"
>
<NodePreview :node-def="nodeDef" class="!text-[.625rem] !min-w-full" />
<NodePreview :node-def="nodeDef" class="text-[.625rem]! min-w-full!" />
</div>
</template>
<template v-else-if="isLoading">

View File

@@ -1,5 +1,5 @@
<template>
<div class="w-full aspect-[7/3] overflow-hidden">
<div class="w-full aspect-7/3 overflow-hidden">
<!-- default banner show -->
<div v-if="showDefaultBanner" class="w-full h-full">
<img

View File

@@ -1,10 +1,10 @@
<template>
<div
class="rounded-lg border shadow-sm h-full overflow-hidden flex flex-col"
class="rounded-lg shadow-sm h-full overflow-hidden flex flex-col"
data-virtual-grid-item
>
<!-- Card header - flush with top, approximately 15% of height -->
<div class="w-full px-4 py-3 flex justify-between items-center border-b">
<div class="w-full px-4 py-3 flex justify-between items-center">
<div class="flex items-center">
<div class="w-6 h-6 flex items-center justify-center">
<Skeleton shape="circle" width="1.5rem" height="1.5rem" />
@@ -17,7 +17,7 @@
<!-- Card content with icon on left and text on right -->
<div class="flex-1 p-4 flex">
<!-- Left icon - 64x64 -->
<div class="flex-shrink-0 mr-4">
<div class="shrink-0 mr-4">
<Skeleton width="4rem" height="4rem" border-radius="0.5rem" />
</div>
@@ -42,7 +42,7 @@
</div>
<!-- Card footer - similar to header -->
<div class="w-full px-5 py-4 flex justify-between items-center border-t">
<div class="w-full px-5 py-4 flex justify-between items-center">
<Skeleton width="4rem" height="0.8rem" />
<Skeleton width="6rem" height="0.8rem" />
</div>