Skip to content

Commit e686ac9

Browse files
sakuhanachanLeaf-0w0
sakuhanachan
and
Leaf-0w0
authored
[WIP] Migration to Tailwind CSS v4 (#378)
* Migration to Tailwind CSS v4 (1) * Migration to Tailwind CSS v4 (2) * chore: 更新版本至8.3并修复响应式样式问题 --------- Co-authored-by: 葉桜 <a-tri@foxmail.com>
1 parent 1670f5c commit e686ac9

55 files changed

Lines changed: 689 additions & 742 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎astro.config.mjs‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import sitemap from "@astrojs/sitemap";
22
import svelte, { vitePreprocess } from "@astrojs/svelte";
3-
import tailwind from "@astrojs/tailwind";
3+
import tailwindcss from "@tailwindcss/vite";
44
import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
55
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
66
import swup from "@swup/astro";
@@ -40,9 +40,6 @@ export default defineConfig({
4040
umami({
4141
shareUrl: false,
4242
}),
43-
tailwind({
44-
nesting: true,
45-
}),
4643
swup({
4744
theme: false,
4845
animationClass: "transition-swup-",
@@ -170,6 +167,7 @@ export default defineConfig({
170167
],
171168
},
172169
vite: {
170+
plugins: [tailwindcss()],
173171
build: {
174172
// 静态资源处理优化，防止小图片转 base64 导致 HTML 体积过大（可选，根据需要调整）
175173
assetsInlineLimit: 4096,

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "mizuki",
33
"type": "module",
4-
"version": "8.2",
4+
"version": "8.3",
55
"scripts": {
66
"sync-content": "node scripts/sync-content.js",
77
"init-content": "node scripts/init-content-repo.js",
@@ -30,7 +30,6 @@
3030
"@astrojs/rss": "^4.0.15",
3131
"@astrojs/sitemap": "^3.7.0",
3232
"@astrojs/svelte": "7.2.5",
33-
"@astrojs/tailwind": "^6.0.2",
3433
"@expressive-code/core": "^0.41.6",
3534
"@expressive-code/plugin-collapsible-sections": "^0.41.6",
3635
"@expressive-code/plugin-line-numbers": "^0.41.6",
@@ -44,7 +43,9 @@
4443
"@iconify-json/simple-icons": "^1.2.69",
4544
"@iconify/svelte": "^4.2.0",
4645
"@swup/astro": "^1.7.0",
46+
"@tailwindcss/cli": "^4.2.0",
4747
"@tailwindcss/typography": "^0.5.19",
48+
"@tailwindcss/vite": "^4.2.0",
4849
"astro": "5.17.1",
4950
"astro-expressive-code": "^0.41.6",
5051
"astro-icon": "^1.1.5",
@@ -76,7 +77,7 @@
7677
"sharp": "^0.34.5",
7778
"stylus": "^0.64.0",
7879
"svelte": "^5.46.1",
79-
"tailwindcss": "^3.4.19",
80+
"tailwindcss": "^4.2.0",
8081
"typescript": "^5.9.3",
8182
"unist-util-visit": "^5.0.0"
8283
},

‎pnpm-lock.yaml‎

Lines changed: 282 additions & 334 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎postcss.config.mjs‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/components/ArchivePanel.svelte‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -95,14 +95,14 @@ onMount(async () => {
9595
<div class="card-base px-8 py-6">
9696
{#each groups as group}
9797
<div>
98-
<div class="flex flex-row w-full items-center h-[3.75rem]">
98+
<div class="flex flex-row w-full items-center h-15">
9999
<div class="w-[15%] md:w-[10%] transition text-2xl font-bold text-right text-75">
100100
{group.year}
101101
</div>
102102
<div class="w-[15%] md:w-[10%]">
103103
<div
104-
class="h-3 w-3 bg-none rounded-full outline outline-[var(--primary)] mx-auto
105-
-outline-offset-[2px] z-50 outline-3"
104+
class="h-3 w-3 bg-none rounded-full outline outline-(--primary) mx-auto
105+
-outline-offset-2 z-50 outline-3"
106106
></div>
107107
</div>
108108
<div class="w-[70%] md:w-[80%] transition text-left text-50">
@@ -114,7 +114,7 @@ onMount(async () => {
114114
<a
115115
href={post.url || `/posts/${post.id}/`}
116116
aria-label={post.data.title}
117-
class="group btn-plain !block h-10 w-full rounded-lg hover:text-[initial]"
117+
class="group btn-plain block! h-10 w-full rounded-lg hover:text-[initial]"
118118
>
119119
<div class="flex flex-row justify-start items-center h-full">
120120
<!-- date -->
@@ -126,27 +126,27 @@ onMount(async () => {
126126
<div class="w-[15%] md:w-[10%] relative dash-line h-full flex items-center">
127127
<div
128128
class="transition-all mx-auto w-1 h-1 rounded group-hover:h-5
129-
bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)]
129+
bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-(--primary)
130130
outline outline-4 z-50
131-
outline-[var(--card-bg)]
132-
group-hover:outline-[var(--btn-plain-bg-hover)]
133-
group-active:outline-[var(--btn-plain-bg-active)]"
131+
outline-(--card-bg)
132+
group-hover:outline-(--btn-plain-bg-hover)
133+
group-active:outline-(--btn-plain-bg-active)"
134134
></div>
135135
</div>
136136

137137
<!-- post title -->
138138
<div
139139
class="w-[70%] md:max-w-[65%] md:w-[65%] text-left font-bold
140-
group-hover:translate-x-1 transition-all group-hover:text-[var(--primary)]
141-
text-75 pr-8 whitespace-nowrap overflow-ellipsis overflow-hidden"
140+
group-hover:translate-x-1 transition-all group-hover:text-(--primary)
141+
text-75 pr-8 whitespace-nowrap text-ellipsis overflow-hidden"
142142
>
143143
{post.data.title}
144144
</div>
145145

146146
<!-- tag list -->
147147
<div
148148
class="hidden md:block md:w-[15%] text-left text-sm transition
149-
whitespace-nowrap overflow-ellipsis overflow-hidden text-30"
149+
whitespace-nowrap text-ellipsis overflow-hidden text-30"
150150
>
151151
{formatTag(post.data.tags)}
152152
</div>

‎src/components/Footer.astro‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ if (footerConfig.enable) {
3333
}
3434
---
3535

36-
<!--<div class="border-t border-[var(&#45;&#45;primary)] mx-16 border-dashed py-8 max-w-[var(&#45;&#45;page-width)] flex flex-col items-center justify-center px-6">-->
36+
<!--<div class="border-t border-(--primary) mx-16 border-dashed py-8 max-w-(--page-width) flex flex-col items-center justify-center px-6">-->
3737
<div class="transition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32"></div>
38-
<!--<div class="transition bg-[oklch(92%_0.01_var(&#45;&#45;hue))] dark:bg-black rounded-2xl py-8 mt-4 mb-8 flex flex-col items-center justify-center px-6">-->
38+
<!--<div class="transition bg-[oklch(92%_0.01_var(--hue))] dark:bg-black rounded-2xl py-8 mt-4 mb-8 flex flex-col items-center justify-center px-6">-->
3939
<div class="transition border-dashed border-[oklch(85%_0.01_var(--hue))] dark:border-white/15 rounded-2xl mb-12 flex flex-col items-center justify-center px-6">
4040
<div class="transition text-50 text-sm text-center">
4141
{customFooterHtml && (
@@ -44,15 +44,15 @@ if (footerConfig.enable) {
4444

4545
<div class="mb-2">
4646
&copy; <span id="copyright-year">{currentYear}</span> {profileConfig.name}. All Rights Reserved. /
47-
<a class="transition link text-[var(--primary)] font-medium" href={url('rss/')} onclick={`event.preventDefault(); navigateToPage('${url('rss/')}')`}>RSS</a> /
48-
<a class="transition link text-[var(--primary)] font-medium" href={url('atom/')} onclick={`event.preventDefault(); navigateToPage('${url('atom/')}')`}>Atom</a> /
49-
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a>
47+
<a class="transition link text-(--primary) font-medium" href={url('rss/')} onclick={`event.preventDefault(); navigateToPage('${url('rss/')}')`}>RSS</a> /
48+
<a class="transition link text-(--primary) font-medium" href={url('atom/')} onclick={`event.preventDefault(); navigateToPage('${url('atom/')}')`}>Atom</a> /
49+
<a class="transition link text-(--primary) font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a>
5050
</div>
5151

5252
<div>
5353
Powered by
54-
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
55-
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">Mizuki</a>&nbsp; Version <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">8.2</a>
54+
<a class="transition link text-(--primary) font-medium" target="_blank" href="https://astro.build">Astro</a> &
55+
<a class="transition link text-(--primary) font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">Mizuki</a>&nbsp; Version <a class="transition link text-(--primary) font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">8.3</a>
5656
</div>
5757

5858
</div>

‎src/components/MobileTOC.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ if (typeof window !== "undefined") {
323323
on:click={togglePanel}
324324
aria-label="Table of Contents"
325325
id="mobile-toc-switch"
326-
class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90 lg:!hidden theme-switch-btn"
326+
class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90 lg:hidden! theme-switch-btn"
327327
>
328328
<Icon icon="material-symbols:format-list-bulleted" class="text-[1.25rem]" />
329329
</button>
@@ -335,7 +335,7 @@ if (typeof window !== "undefined") {
335335
top-20 left-4 md:left-[unset] right-4 shadow-2xl rounded-2xl p-4"
336336
>
337337
<div class="flex items-center justify-between mb-4">
338-
<h3 class="text-lg font-bold text-[var(--primary)]">{isHomePage ? i18n(I18nKey.postList) : i18n(I18nKey.tableOfContents)}</h3>
338+
<h3 class="text-lg font-bold text-(--primary)">{isHomePage ? i18n(I18nKey.postList) : i18n(I18nKey.tableOfContents)}</h3>
339339
<button
340340
on:click={togglePanel}
341341
aria-label="Close TOC"

‎src/components/Navbar.astro‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,17 @@ const rawIcon = siteConfig.navbarTitle?.icon || "/assets/home/home.png";
4242
const iconSrc = rawIcon.match(/^(http|https|\/\/)/) ? rawIcon : url(rawIcon);
4343
---
4444
<div id="navbar" class="z-50 onload-animation group" data-transparent-mode={navbarTransparentMode} data-is-home={isHomePage}>
45-
<div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation -->
46-
<div class:list={[className, "!overflow-visible max-w-[var(--page-width)] h-[4.5rem] mx-auto flex items-center justify-between px-4"]}>
47-
<a href={url('/')} class="btn-plain scale-animation rounded-lg h-[2.5rem] md:h-[3.25rem] md:[.enable-banner_&]:h-[2.5rem] md:[.enable-banner_&]:group-[.scrolled]:h-[3.25rem] px-5 font-bold active:scale-95 shrink-0 transition-all duration-300">
45+
<div class="absolute h-8 left-0 right-0 -top-8 bg-(--card-bg) transition"></div> <!-- used for onload animation -->
46+
<div class:list={[className, "overflow-visible! max-w-(--page-width) h-18 mx-auto flex items-center justify-between px-4"]}>
47+
<a href={url('/')} class="btn-plain scale-animation rounded-lg h-10 md:h-13 md:in-[.enable-banner]:h-10 md:in-[.enable-banner]:group-[.scrolled]:h-13 px-5 font-bold active:scale-95 shrink-0 transition-all duration-300">
4848
<div class="flex flex-row items-center text-md">
4949
{/* 使用navbarTitle配置或默认配置 */}
5050
{siteConfig.navbarTitle ? (
5151
siteConfig.navbarTitle.mode === "logo" ? (
52-
<img src={logoSrc} alt={siteConfig.navbarTitle.text} class="h-[2.5rem] md:h-[3.25rem] md:[.enable-banner_&]:h-[2.5rem] md:[.enable-banner_&]:group-[.scrolled]:h-[3.25rem] max-w-full object-contain transition-all duration-300" loading="lazy" />
52+
<img src={logoSrc} alt={siteConfig.navbarTitle.text} class="h-10 md:h-13 md:in-[.enable-banner]:h-10 md:in-[.enable-banner]:group-[.scrolled]:h-13 max-w-full object-contain transition-all duration-300" loading="lazy" />
5353
) : (
5454
<>
55-
<img src={iconSrc} alt={siteConfig.navbarTitle.text} class="h-[1.75rem] w-[1.75rem] mr-2 object-contain" loading="lazy" />
55+
<img src={iconSrc} alt={siteConfig.navbarTitle.text} class="h-7 w-7 mr-2 object-contain" loading="lazy" />
5656
<span class="dark:text-white text-black">{siteConfig.navbarTitle.text}</span>
5757
</>
5858
)
@@ -90,7 +90,7 @@ const iconSrc = rawIcon.match(/^(http|https|\/\/)/) ? rawIcon : url(rawIcon);
9090
<WallpaperSwitch client:only="svelte"></WallpaperSwitch>
9191
</div>
9292
<LightDarkSwitch client:only="svelte"></LightDarkSwitch>
93-
<button aria-label="Menu" name="Nav Menu" class="btn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:!hidden" id="nav-menu-switch">
93+
<button aria-label="Menu" name="Nav Menu" class="btn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:hidden!" id="nav-menu-switch">
9494
<Icon name="material-symbols:unfold-more" class="text-[1.25rem]"></Icon>
9595
</button>
9696
</div>

‎src/components/PostCard.astro‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const { remarkPluginFrontmatter } = await render(entry);
3838

3939
<div
4040
class:list={[
41-
"card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative",
41+
"card-base flex flex-col-reverse md:flex-col w-full rounded-(--radius-large) overflow-hidden relative",
4242
className,
4343
]}
4444
style={style}
@@ -47,35 +47,35 @@ const { remarkPluginFrontmatter } = await render(entry);
4747
class:list={[
4848
"pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative",
4949
{
50-
"w-full md:w-[calc(100%_-_3.25rem_-_0.75rem)]": !hasCover,
51-
"w-full md:w-[calc(100%_-_var(--coverWidth)_-_0.75rem)]": hasCover,
50+
"w-full md:w-[calc(100%-3.25rem-0.75rem)]": !hasCover,
51+
"w-full md:w-[calc(100%-var(--coverWidth)-0.75rem)]": hasCover,
5252
},
5353
]}
5454
>
5555
<a
5656
href={url}
5757
class="transition group w-full block font-bold mb-3 text-3xl text-90
58-
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
59-
active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
60-
before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
58+
hover:text-(--primary) dark:hover:text-(--primary)
59+
active:text-(--title-active) dark:active:text-(--title-active)
60+
before:w-1 before:h-5 before:rounded-md before:bg-(--primary)
6161
before:absolute
62-
before:top-[2.1875rem] before:left-[1.125rem] before:hidden md:before:block"
62+
before:top-8.75 before:left-4.5 before:hidden md:before:block"
6363
>
6464
{
6565
pinned && (
6666
<Icon
6767
name="mdi:pin"
68-
class="inline text-[var(--primary)] text-2xl mr-2 -translate-y-0.5"
68+
class="inline text-(--primary) text-2xl mr-2 -translate-y-0.5"
6969
/>
7070
)
7171
}
7272
{title}
7373
<Icon
74-
class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute"
74+
class="inline text-[2rem] text-(--primary) md:hidden translate-y-0.5 absolute"
7575
name="material-symbols:chevron-right-rounded"
7676
/>
7777
<Icon
78-
class="text-[var(--primary)] text-[2rem] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0"
78+
class="text-(--primary) text-[2rem] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0"
7979
name="material-symbols:chevron-right-rounded"
8080
/>
8181
</a>
@@ -110,7 +110,7 @@ const { remarkPluginFrontmatter } = await render(entry);
110110
href={getTagUrl(tag)}
111111
class:list={[
112112
siteConfig.tagStyle?.useNewStyle
113-
? "link-lg transition text-50 text-xs font-medium px-2 py-1 rounded-lg hover:text-[var(--primary)] dark:hover:text-[var(--primary)] active:text-[var(--primary)] dark:active:text-[var(--primary)] group/tag whitespace-nowrap"
113+
? "link-lg transition text-50 text-xs font-medium px-2 py-1 rounded-lg hover:text-(--primary) dark:hover:text-(--primary) active:text-(--primary) dark:active:text-(--primary) group/tag whitespace-nowrap"
114114
: "btn-regular h-6 text-xs px-2 rounded-lg",
115115
]}
116116
aria-label={`View all posts tagged with ${tag.trim()}`}
@@ -135,7 +135,7 @@ const { remarkPluginFrontmatter } = await render(entry);
135135
class:list={[
136136
"group",
137137
"max-h-[20vh] md:max-h-none mx-4 mt-4 -mb-2 md:mb-0 md:mx-0 md:mt-0",
138-
"md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95",
138+
"md:w-(--coverWidth) relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95",
139139
]}
140140
>
141141
<div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition" />
@@ -160,21 +160,21 @@ const { remarkPluginFrontmatter } = await render(entry);
160160
<a
161161
href={url}
162162
aria-label={title}
163-
class="!hidden md:!flex btn-regular w-[3.25rem]
164-
absolute right-3 top-3 bottom-3 rounded-xl bg-[var(--enter-btn-bg)]
165-
hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95
163+
class="!hidden md:flex! btn-regular w-13
164+
absolute right-3 top-3 bottom-3 rounded-xl bg-(--enter-btn-bg)
165+
hover:bg-(--enter-btn-bg-hover) active:bg-(--enter-btn-bg-active) active:scale-95
166166
"
167167
>
168168
<Icon
169169
name="material-symbols:chevron-right-rounded"
170-
class="transition text-[var(--primary)] text-4xl mx-auto"
170+
class="transition text-(--primary) text-4xl mx-auto"
171171
/>
172172
</a>
173173
)
174174
}
175175
</div>
176176
<div
177-
class="transition border-t-[1px] border-dashed mx-6 border-black/10 dark:border-white/[0.15] last:border-t-0 md:hidden"
177+
class="transition border-t border-dashed mx-6 border-black/10 dark:border-white/15 last:border-t-0 md:hidden"
178178
>
179179
</div>
180180

‎src/components/PostMeta.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const {
6464
<div class="flex flex-row flex-nowrap items-center">
6565
<a href={getCategoryUrl(category || '')} aria-label={`View all posts in the ${category} category`}
6666
class="link-lg transition text-50 text-sm font-medium
67-
hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
67+
hover:text-(--primary) dark:hover:text-(--primary) whitespace-nowrap">
6868
{category || i18n(I18nKey.uncategorized)}
6969
</a>
7070
</div>
@@ -91,10 +91,10 @@ const {
9191
<div class="flex flex-row flex-nowrap items-center">
9292
{(tags && tags.length > 0) && tags.map((tag, i) => (
9393
<>
94-
<div class:list={[{"hidden": i == 0}, "mx-1.5 text-[var(--meta-divider)] text-sm"]}>/</div>
94+
<div class:list={[{"hidden": i == 0}, "mx-1.5 text-(--meta-divider) text-sm"]}>/</div>
9595
<a href={getTagUrl(tag)} aria-label={`View all posts with the ${tag.trim()} tag`}
9696
class="link-lg transition text-50 text-sm font-medium
97-
hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
97+
hover:text-(--primary) dark:hover:text-(--primary) whitespace-nowrap">
9898
{tag.trim()}
9999
</a>
100100
</>

0 commit comments

Comments
 (0)