Skip to content

Commit

Permalink
refactor(tailwind): bump all projects to v4 with vite tailwind plugin (
Browse files Browse the repository at this point in the history
…#1189)

docs: https://tailwindcss.com/blog/tailwindcss-v4

swapped to vite plugin to improve dev perf as well per the rec from the
blog post.

---------

Co-authored-by: Tyler <[email protected]>
tylersayshi and tylersayshi authored Jan 27, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 7b08225 commit 18965de
Showing 58 changed files with 526 additions and 520 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import '../styles.css';

import type { ReactNode } from 'react';

import { Header } from '../components/header';
@@ -11,7 +9,7 @@ export default async function RootLayout({ children }: RootLayoutProps) {
const data = await getData();

return (
<div style={{ fontFamily: 'Nunito' }}>
<div style={{ fontFamily: 'sans-serif' }}>
<meta name="description" content={data.description} />
<link rel="icon" type="image/png" href={data.icon} />
<Header />
1 change: 0 additions & 1 deletion e2e/fixtures/monorepo/packages/waku-project/src/styles.css

This file was deleted.

4 changes: 2 additions & 2 deletions examples/01_template/package.json
Original file line number Diff line number Diff line change
@@ -15,10 +15,10 @@
"waku": "0.21.17"
},
"devDependencies": {
"@tailwindcss/vite": "4.0.0",
"@types/react": "19.0.8",
"@types/react-dom": "19.0.3",
"autoprefixer": "10.4.20",
"tailwindcss": "3.4.17",
"tailwindcss": "4.0.0",
"typescript": "5.7.3"
}
}
7 changes: 0 additions & 7 deletions examples/01_template/postcss.config.js

This file was deleted.

4 changes: 2 additions & 2 deletions examples/01_template/src/components/counter.tsx
Original file line number Diff line number Diff line change
@@ -8,11 +8,11 @@ export const Counter = () => {
const handleIncrement = () => setCount((c) => c + 1);

return (
<section className="border-blue-400 -mx-4 mt-4 rounded border border-dashed p-4">
<section className="border-blue-400 -mx-4 mt-4 rounded-sm border border-dashed p-4">
<div>Count: {count}</div>
<button
onClick={handleIncrement}
className="rounded-sm bg-black px-2 py-0.5 text-sm text-white"
className="rounded-xs bg-black px-2 py-0.5 text-sm text-white"
>
Increment
</button>
7 changes: 3 additions & 4 deletions examples/01_template/src/styles.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap')
layer(base);
@import 'tailwindcss';
4 changes: 0 additions & 4 deletions examples/01_template/tailwind.config.js

This file was deleted.

5 changes: 5 additions & 0 deletions examples/01_template/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import tailwindcss from '@tailwindcss/vite';

export default {
plugins: [tailwindcss()],
};
4 changes: 2 additions & 2 deletions examples/02_template_js/package.json
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@
"waku": "0.21.17"
},
"devDependencies": {
"autoprefixer": "10.4.20",
"tailwindcss": "3.4.17"
"@tailwindcss/vite": "4.0.0",
"tailwindcss": "4.0.0"
}
}
7 changes: 0 additions & 7 deletions examples/02_template_js/postcss.config.js

This file was deleted.

4 changes: 2 additions & 2 deletions examples/02_template_js/src/components/counter.jsx
Original file line number Diff line number Diff line change
@@ -8,11 +8,11 @@ export const Counter = () => {
const handleIncrement = () => setCount((c) => c + 1);

return (
<section className="border-blue-400 -mx-4 mt-4 rounded border border-dashed p-4">
<section className="border-blue-400 -mx-4 mt-4 rounded-sm border border-dashed p-4">
<div>Count: {count}</div>
<button
onClick={handleIncrement}
className="rounded-sm bg-black px-2 py-0.5 text-sm text-white"
className="rounded-xs bg-black px-2 py-0.5 text-sm text-white"
>
Increment
</button>
7 changes: 3 additions & 4 deletions examples/02_template_js/src/styles.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap')
layer(base);
@import 'tailwindcss';
4 changes: 0 additions & 4 deletions examples/02_template_js/tailwind.config.js

This file was deleted.

5 changes: 5 additions & 0 deletions examples/02_template_js/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import tailwindcss from '@tailwindcss/vite';

export default {
plugins: [tailwindcss()],
};
3 changes: 2 additions & 1 deletion examples/03_demo/package.json
Original file line number Diff line number Diff line change
@@ -9,6 +9,7 @@
"start": "waku start"
},
"dependencies": {
"@tailwindcss/vite": "4.0.0",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-server-dom-webpack": "19.0.0",
@@ -18,7 +19,7 @@
"@types/react": "19.0.8",
"@types/react-dom": "19.0.3",
"autoprefixer": "10.4.20",
"tailwindcss": "3.4.17",
"tailwindcss": "4.0.0",
"typescript": "5.7.3"
}
}
7 changes: 0 additions & 7 deletions examples/03_demo/postcss.config.js

This file was deleted.

6 changes: 3 additions & 3 deletions examples/03_demo/src/pages/[slug].tsx
Original file line number Diff line number Diff line change
@@ -17,7 +17,7 @@ export default async function PokemonPage({ slug }: PageProps<'/[slug]'>) {
<>
<title>{`Waku ${pokemon.name.english}`}</title>
<div className="w-full p-6">
<div className="mx-auto flex w-full flex-shrink-0 flex-col items-center justify-center gap-6 rounded-xl bg-gray-50 p-12 leading-none md:w-full md:max-w-xl">
<div className="mx-auto flex w-full shrink-0 flex-col items-center justify-center gap-6 rounded-xl bg-gray-50 p-12 leading-none md:w-full md:max-w-xl">
<div>
<ul className="flex items-center justify-center gap-1.5">
{pokemon.type.map((type: string) => (
@@ -34,7 +34,7 @@ export default async function PokemonPage({ slug }: PageProps<'/[slug]'>) {
<img
src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`}
alt={pokemon.slug}
className="block size-[144px] flex-shrink-0"
className="block size-[144px] shrink-0"
/>
<div className="flex flex-col items-center justify-center gap-1 text-2xl leading-none">
<span className="font-bold">{pokemon.name.english}</span>
@@ -48,7 +48,7 @@ export default async function PokemonPage({ slug }: PageProps<'/[slug]'>) {
{stats.map(([stat, value]: any) => (
<li
key={stat}
className="inline-block rounded-sm bg-black px-1.5 py-1 text-[0.5rem] font-bold uppercase tracking-wider text-white"
className="rounded-xs inline-block bg-black px-1.5 py-1 text-[0.5rem] font-bold uppercase tracking-wider text-white"
>
{stat}: {value}
</li>
4 changes: 2 additions & 2 deletions examples/03_demo/src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -18,12 +18,12 @@ export default async function HomePage() {
className="whitespace-nowrap text-xs font-bold hover:underline sm:text-base"
>{`SELECT * FROM pokemon ORDER BY RANDOM() LIMIT 9`}</a>
</div>
<ul className="relative mt-6 grid h-full w-full max-w-xl flex-shrink-0 grid-cols-2 gap-6 leading-none md:grid-cols-3 md:px-0">
<ul className="relative mt-6 grid h-full w-full max-w-xl shrink-0 grid-cols-2 gap-6 leading-none md:grid-cols-3 md:px-0">
{rows.map((row) => (
<li key={row.id}>
<Link
to={`/${row.slug}`}
className="flex aspect-square w-full flex-shrink-0 flex-col items-center justify-center rounded-xl bg-gray-50 p-3 text-gray-950 transition-colors duration-500 ease-in-out hover:bg-gray-200"
className="flex aspect-square w-full shrink-0 flex-col items-center justify-center rounded-xl bg-gray-50 p-3 text-gray-950 transition-colors duration-500 ease-in-out hover:bg-gray-200"
>
<img
src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${row.id}.png`}
16 changes: 11 additions & 5 deletions examples/03_demo/src/styles.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap')
layer(base);
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap')
layer(base);
@import 'tailwindcss';

@theme {
--font-*: initial;
--font-nunito: 'Nunito', sans-serif;
--font-zen-maru-gothic: 'Zen Maru Gothic', serif;
}
10 changes: 0 additions & 10 deletions examples/03_demo/tailwind.config.js

This file was deleted.

5 changes: 5 additions & 0 deletions examples/03_demo/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import tailwindcss from '@tailwindcss/vite';

export default {
plugins: [tailwindcss()],
};
4 changes: 2 additions & 2 deletions examples/05_compiler/package.json
Original file line number Diff line number Diff line change
@@ -15,12 +15,12 @@
"waku": "0.21.17"
},
"devDependencies": {
"@tailwindcss/vite": "4.0.0",
"@types/react": "19.0.8",
"@types/react-dom": "19.0.3",
"@vitejs/plugin-react": "4.3.4",
"autoprefixer": "10.4.20",
"babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
"tailwindcss": "3.4.17",
"tailwindcss": "4.0.0",
"typescript": "5.7.3"
}
}
7 changes: 0 additions & 7 deletions examples/05_compiler/postcss.config.js

This file was deleted.

4 changes: 2 additions & 2 deletions examples/05_compiler/src/components/counter.tsx
Original file line number Diff line number Diff line change
@@ -12,11 +12,11 @@ export const Counter = () => {
const handleIncrement = () => setCount((c) => c + 1);

return (
<section className="border-blue-400 -mx-4 mt-4 rounded border border-dashed p-4">
<section className="border-blue-400 -mx-4 mt-4 rounded-sm border border-dashed p-4">
<div>Count: {count}</div>
<button
onClick={handleIncrement}
className="rounded-sm bg-black px-2 py-0.5 text-sm text-white"
className="rounded-xs bg-black px-2 py-0.5 text-sm text-white"
>
Increment
</button>
7 changes: 3 additions & 4 deletions examples/05_compiler/src/styles.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap')
layer(base);
@import 'tailwindcss';
4 changes: 0 additions & 4 deletions examples/05_compiler/tailwind.config.js

This file was deleted.

5 changes: 5 additions & 0 deletions examples/05_compiler/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import tailwindcss from '@tailwindcss/vite';

export default {
plugins: [tailwindcss()],
};
4 changes: 2 additions & 2 deletions examples/06_form-demo/package.json
Original file line number Diff line number Diff line change
@@ -9,6 +9,7 @@
"start": "waku start"
},
"dependencies": {
"@tailwindcss/vite": "4.0.0",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-server-dom-webpack": "19.0.0",
@@ -17,8 +18,7 @@
"devDependencies": {
"@types/react": "19.0.8",
"@types/react-dom": "19.0.3",
"autoprefixer": "10.4.20",
"tailwindcss": "3.4.17",
"tailwindcss": "4.0.0",
"typescript": "5.7.3"
}
}
7 changes: 0 additions & 7 deletions examples/06_form-demo/postcss.config.js

This file was deleted.

4 changes: 2 additions & 2 deletions examples/06_form-demo/src/components/Form.tsx
Original file line number Diff line number Diff line change
@@ -33,7 +33,7 @@ export const Form = ({
<input
name="name"
required
className="invalid:border-red-500 rounded border px-2 py-1"
className="invalid:border-red-500 rounded-sm border px-2 py-1"
/>
</div>
<div>
@@ -42,7 +42,7 @@ export const Form = ({
type="email"
name="email"
required
className="invalid:border-red-500 rounded border px-2 py-1"
className="invalid:border-red-500 rounded-sm border px-2 py-1"
/>
</div>
<SubmitButton />
16 changes: 11 additions & 5 deletions examples/06_form-demo/src/styles.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap')
layer(base);
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap')
layer(base);
@import 'tailwindcss';

@theme {
--font-*: initial;
--font-nunito: 'Nunito', sans-serif;
--font-zen-maru-gothic: 'Zen Maru Gothic', serif;
}
10 changes: 0 additions & 10 deletions examples/06_form-demo/tailwind.config.js

This file was deleted.

5 changes: 5 additions & 0 deletions examples/06_form-demo/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import tailwindcss from '@tailwindcss/vite';

export default {
plugins: [tailwindcss()],
};
4 changes: 2 additions & 2 deletions examples/12_nossr/package.json
Original file line number Diff line number Diff line change
@@ -9,6 +9,7 @@
"start": "waku start"
},
"dependencies": {
"@tailwindcss/vite": "4.0.0",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-server-dom-webpack": "19.0.0",
@@ -17,8 +18,7 @@
"devDependencies": {
"@types/react": "19.0.8",
"@types/react-dom": "19.0.3",
"autoprefixer": "10.4.20",
"tailwindcss": "3.4.17",
"tailwindcss": "4.0.0",
"typescript": "5.7.3",
"vite": "6.0.11"
}
7 changes: 0 additions & 7 deletions examples/12_nossr/postcss.config.js

This file was deleted.

4 changes: 2 additions & 2 deletions examples/12_nossr/src/components/counter.tsx
Original file line number Diff line number Diff line change
@@ -8,11 +8,11 @@ export const Counter = () => {
const handleIncrement = () => setCount((c) => c + 1);

return (
<section className="border-blue-400 -mx-4 mt-4 rounded border border-dashed p-4">
<section className="border-blue-400 -mx-4 mt-4 rounded-sm border border-dashed p-4">
<div>Count: {count}</div>
<button
onClick={handleIncrement}
className="rounded-sm bg-black px-2 py-0.5 text-sm text-white"
className="rounded-xs bg-black px-2 py-0.5 text-sm text-white"
>
Increment
</button>
7 changes: 3 additions & 4 deletions examples/12_nossr/src/styles.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap')
layer(base);
@import 'tailwindcss';
4 changes: 0 additions & 4 deletions examples/12_nossr/tailwind.config.js

This file was deleted.

5 changes: 5 additions & 0 deletions examples/12_nossr/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import tailwindcss from '@tailwindcss/vite';

export default {
plugins: [tailwindcss()],
};
10 changes: 0 additions & 10 deletions examples/12_nossr/waku.config.ts

This file was deleted.

3 changes: 2 additions & 1 deletion examples/42_react-tweet/package.json
Original file line number Diff line number Diff line change
@@ -16,10 +16,11 @@
"waku": "0.21.17"
},
"devDependencies": {
"@tailwindcss/vite": "4.0.0",
"@types/react": "19.0.8",
"@types/react-dom": "19.0.3",
"autoprefixer": "10.4.20",
"tailwindcss": "3.4.17",
"tailwindcss": "4.0.0",
"typescript": "5.7.3"
}
}
7 changes: 0 additions & 7 deletions examples/42_react-tweet/postcss.config.js

This file was deleted.

7 changes: 3 additions & 4 deletions examples/42_react-tweet/src/styles.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap')
layer(base);
@import 'tailwindcss';
4 changes: 0 additions & 4 deletions examples/42_react-tweet/tailwind.config.js

This file was deleted.

5 changes: 5 additions & 0 deletions examples/42_react-tweet/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import tailwindcss from '@tailwindcss/vite';

export default {
plugins: [tailwindcss()],
};
4 changes: 4 additions & 0 deletions packages/waku/src/lib/middleware/dev-server-impl.ts
Original file line number Diff line number Diff line change
@@ -392,6 +392,10 @@ export const devServer: Middleware = (options) => {
const processedModules = new Set<string>();

const processModule = async (modulePath: string) => {
if (modulePath.endsWith('.css')) {
// HACK not sure if this is correct
return;
}
if (processedModules.has(modulePath)) {
return;
}
4 changes: 2 additions & 2 deletions packages/website/package.json
Original file line number Diff line number Diff line change
@@ -21,13 +21,13 @@
"waku": "workspace:*"
},
"devDependencies": {
"@tailwindcss/vite": "4.0.0",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"autoprefixer": "^10.4.20",
"prettier": "^3.4.2",
"prettier-plugin-tailwindcss": "^0.6.10",
"shiki": "^2.1.0",
"tailwindcss": "^3.4.17",
"tailwindcss": "4.0.0",
"typescript": "^5.7.3",
"vite": "6.0.11"
}
8 changes: 0 additions & 8 deletions packages/website/postcss.config.js

This file was deleted.

6 changes: 3 additions & 3 deletions packages/website/src/components/fade.tsx
Original file line number Diff line number Diff line change
@@ -19,9 +19,9 @@ export const Fade = ({ always = true }: FadeProps) => {
always || hasScrolled ? 'opacity-100' : 'opacity-0',
)}
>
<div className="absolute inset-0 backdrop-blur" />
<div className="absolute inset-0 bg-gray-900/75" />
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-black" />
<div className="absolute inset-0 backdrop-blur-sm" />
<div className="bg-gray-900/75 absolute inset-0" />
<div className="bg-linear-to-b absolute inset-0 from-transparent to-black" />
</div>
);
};
2 changes: 1 addition & 1 deletion packages/website/src/components/logo.tsx
Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@ export const Logo = ({ className = '' }: LogoProps) => {
{isMenuOpen && (
<div
onContextMenu={handleContextMenu}
className="absolute -inset-8 flex items-center justify-center overflow-clip rounded-xl backdrop-blur-sm"
className="backdrop-blur-xs absolute -inset-8 flex items-center justify-center overflow-clip rounded-xl"
>
<a
href="https://cdn.candycode.com/waku/waku-logo.zip"
8 changes: 4 additions & 4 deletions packages/website/src/components/mdx.tsx
Original file line number Diff line number Diff line change
@@ -102,7 +102,7 @@ export const components = {
code: ({ children, ...rest }: any) => {
return (
<span
className="-my-0.5 inline-block rounded bg-gray-900 px-1.5 py-px font-mono text-[13px] text-white/80 sm:text-base group-[.blockquote]:sm:text-sm"
className="-my-0.5 inline-block rounded-sm bg-gray-900 px-1.5 py-px font-mono text-[13px] text-white/80 sm:text-base sm:group-[.blockquote]:text-sm"
{...rest}
>
{children}
@@ -113,14 +113,14 @@ export const components = {
return (
<Code
code={children.props.children}
className="code !mb-16 max-w-full overflow-clip overflow-x-scroll rounded-xl bg-gray-900 p-4 font-mono text-sm sm:-mx-3 sm:max-w-[calc(100%+1rem)] sm:p-6 sm:text-base [&>*]:!bg-gray-900"
className="code mb-16! *:bg-gray-900! max-w-full overflow-clip overflow-x-scroll rounded-xl bg-gray-900 p-4 font-mono text-sm sm:-mx-3 sm:max-w-[calc(100%+1rem)] sm:p-6 sm:text-base"
{...rest}
/>
);
},
blockquote: ({ children, ...rest }: any) => {
return (
<div className="mb-6 overflow-clip rounded-xl bg-gray-950 sm:!-mx-3">
<div className="sm:-mx-3! mb-6 overflow-clip rounded-xl bg-gray-950">
<blockquote className="blockquote group p-4 sm:p-6" {...rest}>
<div className="mb-1 flex items-center gap-2">
<svg
@@ -136,7 +136,7 @@ export const components = {
Note
</div>
</div>
<div className="[&>*]:!text-sm [&>*]:!text-white/60 [&>*]:last:!mb-0 [&>*]:sm:!text-base">
<div className="*:text-sm! *:text-white/60! last:*:mb-0! sm:*:text-base!">
{children}
</div>
</blockquote>
16 changes: 8 additions & 8 deletions packages/website/src/components/navigation.tsx
Original file line number Diff line number Diff line change
@@ -26,12 +26,12 @@ export const Navigation = ({ isHome }: NavigationProps) => {
? 'pointer-events-auto opacity-100'
: 'pointer-events-none opacity-0',
isHome && !hasScrolled
? 'xl:!pointer-events-none xl:!opacity-0'
: 'xl:!pointer-events-auto xl:!opacity-100',
'fixed inset-0 z-90 flex-shrink-0 flex-col overflow-clip border-gray-800 bg-gray-950 transition-opacity duration-300 ease-in-out xl:pointer-events-auto xl:bottom-auto xl:left-0 xl:right-auto xl:top-0 xl:z-[9999] xl:h-screen xl:border-r 2xl:left-12 2xl:top-12 2xl:h-[calc(100vh-6rem)] 2xl:rounded-xl 2xl:border',
? 'xl:pointer-events-none! xl:opacity-0!'
: 'xl:pointer-events-auto! xl:opacity-100!',
'xl:z-9999 fixed inset-0 z-90 shrink-0 flex-col overflow-clip border-gray-800 bg-gray-950 transition-opacity duration-300 ease-in-out xl:pointer-events-auto xl:bottom-auto xl:left-0 xl:right-auto xl:top-0 xl:h-screen xl:border-r 2xl:left-12 2xl:top-12 2xl:h-[calc(100vh-6rem)] 2xl:rounded-xl 2xl:border',
)}
>
<div className="relative z-10 flex h-full max-h-full w-full flex-shrink-0 flex-col items-center justify-start gap-8 !overflow-y-auto p-8 pb-16 text-white md:justify-center md:p-8 xl:justify-start xl:gap-12 xl:p-12">
<div className="overflow-y-auto! relative z-10 flex h-full max-h-full w-full shrink-0 flex-col items-center justify-start gap-8 p-8 pb-16 text-white md:justify-center md:p-8 xl:justify-start xl:gap-12 xl:p-12">
<div className="flex w-full flex-col items-center justify-center">
{isHome ? (
<button
@@ -59,7 +59,7 @@ export const Navigation = ({ isHome }: NavigationProps) => {
The minimal React framework
</div>
</div>
<div className="relative flex max-h-full w-full max-w-[16rem] flex-col gap-0.5 md:left-auto xl:flex-grow xl:gap-1.5">
<div className="relative flex max-h-full w-full max-w-[16rem] flex-col gap-0.5 md:left-auto xl:grow xl:gap-1.5">
{docs.map((link) => {
return isHome ? (
<DocLink key={link.to} link={link} />
@@ -68,7 +68,7 @@ export const Navigation = ({ isHome }: NavigationProps) => {
);
})}
</div>
<ul className="relative z-100 mx-auto flex w-full max-w-[16rem] flex-shrink-0 flex-col items-center justify-center gap-3 text-center">
<ul className="relative z-100 mx-auto flex w-full max-w-[16rem] shrink-0 flex-col items-center justify-center gap-3 text-center">
{links.map((link) => {
return <MenuLink key={link.to} link={link} />;
})}
@@ -128,7 +128,7 @@ const DocLink = ({ link }: LinkProps) => {
);
};

const linkClassNames = `block text-balance font-simple text-[11px] font-bold uppercase tracking-[0.125em] text-gray-500 transition duration-300 ease-in-out hover:text-white p-0.5 xl:p-0 !whitespace-nowrap`;
const linkClassNames = `block text-balance font-simple text-[11px] font-bold uppercase tracking-[0.125em] text-gray-500 transition duration-300 ease-in-out hover:text-white p-0.5 xl:p-0 whitespace-nowrap!`;

export const MenuLink = ({ link }: LinkProps) => {
const setIsMenuOpen = useSetAtom(menuAtom);
@@ -164,7 +164,7 @@ export const MenuLink = ({ link }: LinkProps) => {
{link.icon && (
<Icon
icon={link.icon}
className="size-5 flex-shrink-0 fill-current object-contain"
className="size-5 shrink-0 fill-current object-contain"
/>
)}
<span className="text-sm font-bold">{link.label}</span>
2 changes: 1 addition & 1 deletion packages/website/src/pages/blog/[slug].tsx
Original file line number Diff line number Diff line change
@@ -91,7 +91,7 @@ export default async function BlogArticlePage({ slug }: BlogArticlePageProps) {
href="https://github.com/dai-shi/waku"
target="_blank"
rel="noreferrer"
className="text-shadow !inline-block -rotate-[5deg] transform whitespace-nowrap text-center font-serif text-3xl font-extrabold leading-none text-white transition-colors duration-300 ease-in-out hover:text-primary sm:mr-4 sm:text-6xl"
className="text-shadow inline-block! -rotate-[5deg] transform whitespace-nowrap text-center font-serif text-3xl font-extrabold leading-none text-white transition-colors duration-300 ease-in-out hover:text-primary sm:mr-4 sm:text-6xl"
>
star Waku on GitHub!
</a>
4 changes: 2 additions & 2 deletions packages/website/src/pages/blog/index.tsx
Original file line number Diff line number Diff line change
@@ -18,11 +18,11 @@ export default async function BlogIndexPage() {
{articles.map((article) => (
<li
key={article.slug}
className="-mx-px first:-mt-4 first:sm:-mt-6 first:lg:-mt-12"
className="-mx-px first:-mt-4 sm:first:-mt-6 lg:first:-mt-12"
>
<Link
to={`/blog/${article.slug}`}
className="group block rounded-xl border border-gray-800 bg-gray-950/90 p-4 transition-colors duration-300 ease-in-out hover:border-secondary sm:p-6 lg:p-12"
className="bg-gray-950/90 group block rounded-xl border border-gray-800 p-4 transition-colors duration-300 ease-in-out hover:border-secondary sm:p-6 lg:p-12"
>
<div className="flex items-center gap-2 whitespace-nowrap sm:gap-4">
{article.release && (
2 changes: 1 addition & 1 deletion packages/website/src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -42,7 +42,7 @@ export default async function HomePage() {
href="https://github.com/dai-shi/waku"
target="_blank"
rel="noreferrer"
className="text-shadow !inline-block -rotate-[5deg] transform whitespace-nowrap text-center font-serif text-3xl font-extrabold leading-none text-white transition-colors duration-300 ease-in-out hover:text-primary sm:mr-4 sm:text-6xl"
className="text-shadow inline-block! -rotate-[5deg] transform whitespace-nowrap text-center font-serif text-3xl font-extrabold leading-none text-white transition-colors duration-300 ease-in-out hover:text-primary sm:mr-4 sm:text-6xl"
>
star Waku on GitHub!
</a>
110 changes: 58 additions & 52 deletions packages/website/src/styles.css
Original file line number Diff line number Diff line change
@@ -1,58 +1,64 @@
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=block');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=block');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=block');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=block');
@tailwind base;
:root {
@apply bg-black;
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=block')
layer(base);
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=block')
layer(base);
@import url('https://fonts.googleapis.com/css2?family=Inter&display=block')
layer(base);
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=block')
layer(base);
@import 'tailwindcss';

@config '../tailwind.config.js';

@utility text-shadow {
text-shadow: 0.03125em 0.03125em 0px black;
}
body {
@apply overflow-x-clip overflow-y-scroll overscroll-none;
}
#__waku {
@apply bg-gray-950;
opacity: 0;
animation: fadeIn cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards !important;
animation-delay: 0.7s;
}
@keyframes fadeIn {
0% {

@layer base {
:root {
@apply bg-black;
}
body {
@apply overflow-x-clip overflow-y-scroll overscroll-none;
}
#__waku {
@apply bg-gray-950;
opacity: 0;
animation: fadeIn cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards !important;
animation-delay: 0.7s;
}
100% {
opacity: 1;
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
*::-webkit-scrollbar {
@apply h-full w-4 bg-gray-950;
}
*::-webkit-scrollbar-track {
@apply bg-gray-950;
}
*::-webkit-scrollbar-thumb {
@apply rounded-2xl border-4 border-solid border-gray-950 bg-gray-600;
}
*::-webkit-scrollbar-button {
@apply hidden;
}
*:focus {
@apply !outline-none;
}
:focus:not(:focus-visible) {
@apply !outline-none;
}
::selection {
@apply bg-primary text-black;
}
.code + .code {
@apply !-mt-8;
}
@layer utilities {
.text-shadow {
text-shadow: 0.03125em 0.03125em 0px black;
*::-webkit-scrollbar {
@apply h-full w-4 bg-gray-950;
}
*::-webkit-scrollbar-track {
@apply bg-gray-950;
}
*::-webkit-scrollbar-thumb {
@apply rounded-2xl border-4 border-solid border-gray-950 bg-gray-600;
}
*::-webkit-scrollbar-button {
@apply hidden;
}
*:focus {
@apply outline-hidden!;
}
:focus:not(:focus-visible) {
@apply outline-hidden!;
}
::selection {
@apply bg-primary text-black;
}
.code + .code {
@apply -mt-8!;
}
}
@tailwind components;
@tailwind utilities;
7 changes: 6 additions & 1 deletion packages/website/vite.config.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import tailwindcss from '@tailwindcss/vite';

/** @type {import('vite').UserConfig} */
export default ({ mode }: { mode: string }) => {
if (mode === 'development') {
return {
plugins: [tailwindcss()],
optimizeDeps: {
include: ['tailwindcss/colors'],
},
@@ -12,5 +15,7 @@ export default ({ mode }: { mode: string }) => {
},
};
}
return {};
return {
plugins: [tailwindcss()],
};
};
611 changes: 334 additions & 277 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

0 comments on commit 18965de

Please sign in to comment.