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

@@ -1,7 +1,7 @@
<template>
<div
v-if="visible"
class="w-[250px] absolute flex justify-center right-2 md:right-11 z-[1300] bottom-[66px] !bg-inherit !border-0"
class="w-[250px] absolute flex justify-center right-2 md:right-11 z-1300 bottom-[66px] bg-inherit! border-0!"
>
<div
class="bg-white dark-theme:bg-[#2b2b2b] border border-gray-200 dark-theme:border-gray-700 rounded-lg shadow-lg p-4 w-4/5"
@@ -15,7 +15,7 @@
:pt="{
root: {
class:
'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:!bg-transparent focus:!bg-transparent active:!bg-transparent'
'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
},
label: {
class: 'flex flex-col items-start w-full'
@@ -41,7 +41,7 @@
:pt="{
root: {
class:
'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:!bg-transparent focus:!bg-transparent active:!bg-transparent'
'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
},
label: {
class: 'flex flex-col items-start w-full'
@@ -67,7 +67,7 @@
:pt="{
root: {
class:
'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:!bg-transparent focus:!bg-transparent active:!bg-transparent'
'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
},
label: {
class: 'flex flex-col items-start w-full'
@@ -92,7 +92,7 @@
:pt="{
root: {
class:
'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:!bg-transparent focus:!bg-transparent active:!bg-transparent'
'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
},
label: {
class: 'flex flex-col items-start w-full'
@@ -122,7 +122,7 @@
:show-buttons="false"
:use-grouping="false"
:unstyled="true"
input-class="flex-1 bg-transparent border-none outline-none text-sm shadow-none my-0 "
input-class="flex-1 bg-transparent border-none outline-hidden text-sm shadow-none my-0 "
fluid
@input="applyZoom"
@keyup.enter="applyZoom"