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

@@ -88,11 +88,11 @@ useScrollLock();
</script>
<template>
<div class="bg-background fixed z-[2000] size-full">
<div class="fixed z-2000 size-full bg-background">
<transition name="slide-left">
<div v-show="!showUnlockForm" class="size-full">
<div
class="flex-col-center text-foreground/80 hover:text-foreground group fixed left-1/2 top-6 z-[2001] -translate-x-1/2 cursor-pointer text-xl font-semibold"
class="group fixed top-6 left-1/2 z-2001 flex-col-center -translate-x-1/2 cursor-pointer text-xl font-semibold text-foreground/80 hover:text-foreground"
@click="toggleUnlockForm"
>
<LockKeyhole
@@ -100,20 +100,20 @@ useScrollLock();
/>
<span>{{ $t('ui.widgets.lockScreen.unlock') }}</span>
</div>
<div class="flex h-full w-full items-center justify-center">
<div class="flex-center size-full">
<div class="flex w-full justify-center gap-4 px-4 sm:gap-6 md:gap-8">
<div
class="bg-accent relative flex h-[140px] w-[140px] items-center justify-center rounded-xl text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
class="relative flex-center h-[140px] w-[140px] rounded-xl bg-accent text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
>
<span
class="absolute left-3 top-3 text-xs font-semibold sm:text-sm md:text-xl"
class="absolute top-3 left-3 text-xs font-semibold sm:text-sm md:text-xl"
>
{{ meridiem }}
</span>
{{ hour }}
</div>
<div
class="bg-accent flex h-[140px] w-[140px] items-center justify-center rounded-xl text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
class="flex-center h-[140px] w-[140px] rounded-xl bg-accent text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
>
{{ minute }}
</div>
@@ -128,7 +128,7 @@ useScrollLock();
class="flex-center size-full"
@keydown.enter.prevent="handleSubmit"
>
<div class="flex-col-center mb-10 w-[90%] max-w-[300px] px-4">
<div class="mb-10 flex-col-center w-[90%] max-w-[300px] px-4">
<VbenAvatar :src="avatar" class="enter-x mb-6 size-20" />
<div class="enter-x mb-2 w-full items-center">
<Form />