feat: migrate to Tailwind CSS v4 (#7614)

* chore: update deps

* feat: use jsonc/x language

* chore: update eslint 10.0

* fix: no-useless-assignment

* feat: add CLAUDE.md

* chore: ignore

* feat: claude

* fix: lint

* chore: suppot eslint v10

* fix: lint

* fix: lint

* fix: type check

* fix: unit test

* fix: Suggested fix

* fix: unit test

* chore: update stylelint v17

* chore: update all major deps

* fix:  echarts console warn

* chore: update vitest v4

* feat: add skills ignores

* chore: update deps

* chore: update deps

* fix: cspell

* chore: update deps

* chore: update tailwindcss v4

* chore: remove postcss config

* fix: no use catalog

* chore: tailwind v4 config

* fix: tailwindcss v4 sort

* feat: use eslint-plugin-better-tailwindcss

* fix: Interference between enforce-consistent-line-wrapping, jsx-curly-brace-presence and Prettier

* fix: Interference between enforce-consistent-line-wrapping, jsx-curly-brace-presence and Prettier

* fix(lint): resolve prettier and better-tailwindcss formatting conflicts

* fix(tailwind): update theme references and lint sources

* style(format): normalize apps docs and playground vue files

* style(format): normalize core ui-kit components

* style(format): normalize effects ui and layout components
This commit is contained in:
xingyu
2026-03-10 05:08:45 +08:00
committed by GitHub
parent aa7d8630b5
commit a4736a49f8
289 changed files with 5286 additions and 6331 deletions

View File

@@ -14,7 +14,7 @@ withDefaults(defineProps<Props>(), {
<template>
<div class="flex flex-col py-4">
<h3 class="mb-3 font-semibold leading-none tracking-tight">
<h3 class="mb-3 leading-none font-semibold tracking-tight">
{{ title }}
</h3>
<slot></slot>

View File

@@ -34,7 +34,7 @@ function handleClick(value: string) {
</SwitchItem>
<div
v-if="transitionEnable"
class="mb-2 mt-3 flex justify-between gap-3 px-2"
class="mt-3 mb-2 flex justify-between gap-3 px-2"
>
<div
v-for="item in transitionPreset"
@@ -45,7 +45,7 @@ function handleClick(value: string) {
class="outline-box p-2"
@click="handleClick(item)"
>
<div :class="`${item}-slow`" class="bg-accent h-10 w-12 rounded-md"></div>
<div :class="`${item}-slow`" class="h-10 w-12 rounded-md bg-accent"></div>
</div>
</div>
</template>

View File

@@ -55,7 +55,7 @@ const slots = useSlots();
/>
<CircleX
v-if="inputValue"
class="hover:text-foreground text-foreground/60 absolute right-2 top-1/2 size-3 -translate-y-1/2 transform cursor-pointer"
class="absolute top-1/2 right-2 size-3 -translate-y-1/2 transform cursor-pointer text-foreground/60 hover:text-foreground"
@click="() => (inputValue = '')"
/>
</div>

View File

@@ -44,7 +44,7 @@ function activeClass(theme: string): string[] {
<div :class="activeClass(theme.type)" class="outline-box flex-center">
<component :is="components[theme.type]" />
</div>
<div class="text-muted-foreground mt-2 text-center text-xs">
<div class="mt-2 text-center text-xs text-muted-foreground">
{{ theme.name }}
</div>
</div>

View File

@@ -96,7 +96,7 @@ function activeClass(theme: string): string[] {
<component :is="components[theme.type]" />
</div>
<div
class="text-muted-foreground flex-center hover:text-foreground mt-2 text-center text-xs"
class="mt-2 flex-center text-center text-xs text-muted-foreground hover:text-foreground"
>
{{ theme.name }}
<VbenTooltip v-if="theme.tip" side="bottom">

View File

@@ -28,7 +28,7 @@ function handleClick() {
:class="{
'pointer-events-none opacity-50': disabled,
}"
class="hover:bg-accent my-1 flex w-full items-center justify-between rounded-md px-2 py-2.5"
class="my-1 flex w-full items-center justify-between rounded-md px-2 py-2.5 hover:bg-accent"
@click="handleClick"
>
<span class="flex items-center text-sm">
@@ -47,7 +47,7 @@ function handleClick() {
</slot>
</VbenTooltip>
</span>
<span v-if="$slots.shortcut" class="ml-auto mr-2 text-xs opacity-60">
<span v-if="$slots.shortcut" class="mr-2 ml-auto text-xs opacity-60">
<slot name="shortcut"></slot>
</span>
<Switch v-model="checked" @click.stop />

View File

@@ -128,7 +128,7 @@ watch(
:class="{
'outline-box-active': theme.type === modelValue,
}"
class="outline-box flex-center group cursor-pointer"
class="group outline-box flex-center cursor-pointer"
>
<template v-if="theme.type !== 'custom'">
<div
@@ -138,9 +138,9 @@ watch(
</template>
<template v-else>
<div class="size-full px-9 py-2" @click.stop="selectColor">
<div class="flex-center relative size-5 rounded-sm">
<div class="relative flex-center size-5 rounded-sm">
<UserRoundPen
class="z-1 absolute size-5 opacity-60 group-hover:opacity-100"
class="absolute z-1 size-5 opacity-60 group-hover:opacity-100"
/>
<input
ref="colorInput"
@@ -153,7 +153,7 @@ watch(
</div>
</template>
</div>
<div class="text-muted-foreground my-2 text-center text-xs">
<div class="my-2 text-center text-xs text-muted-foreground">
{{ typeView(theme.type) }}
</div>
</div>

View File

@@ -53,9 +53,9 @@ watch(
<NumberFieldIncrement />
</NumberFieldContent>
</NumberField>
<span class="text-muted-foreground whitespace-nowrap text-xs">px</span>
<span class="text-xs whitespace-nowrap text-muted-foreground">px</span>
</div>
<div class="text-muted-foreground text-xs">
<div class="text-xs text-muted-foreground">
{{ $t('preferences.theme.fontSizeTip') }}
</div>
</div>

View File

@@ -29,7 +29,7 @@ const items = [
<template v-for="item in items" :key="item.value">
<ToggleGroupItem
:value="item.value"
class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 w-16 rounded-sm"
class="h-7 w-16 rounded-sm data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
>
{{ item.label }}
</ToggleGroupItem>

View File

@@ -78,7 +78,7 @@ function nameView(name: string) {
>
<component :is="theme.icon" class="mx-9 size-5" />
</div>
<div class="text-muted-foreground mt-2 text-center text-xs">
<div class="mt-2 text-center text-xs text-muted-foreground">
{{ nameView(theme.name) }}
</div>
</div>

View File

@@ -20,7 +20,7 @@ const modelValue = defineModel<string>();
:class="{
'pointer-events-none opacity-50': disabled,
}"
class="hover:bg-accent flex w-full items-center justify-between rounded-md px-2 py-2"
class="flex w-full items-center justify-between rounded-md p-2 hover:bg-accent"
disabled
>
<span class="text-sm">
@@ -36,7 +36,7 @@ const modelValue = defineModel<string>();
<template v-for="item in items" :key="item.value">
<ToggleGroupItem
:value="item.value"
class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 rounded-sm"
class="h-7 rounded-sm data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
>
{{ item.label }}
</ToggleGroupItem>