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
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>
Loading

0 comments on commit 18965de

Please sign in to comment.