This repo contains 6 different tailwindcss projects (to help debug tailwindcss build output from v3 to v4).
See: tailwindlabs/tailwindcss#15722
Each project is using tailwindcss, pnpm, vite, typescript, and react (but have slight differences with how tailwind is setup).
I'm comparing:
- v3 vs v4 tailwind
- in v4 tailwind, i'm comparing the "postcss" setup vs "vite-plugin" setup.
- i'm comparing setups that include
tailwind-mergeand setups that don't
- clone:
git clone git@github.com:skratchdot/tailwind-v4-example-sizes.git - install:
pnpm install - build:
pnpm build
➜ pnpm run build
> tailwind-v4-example-sizes@1.0.0 clean /Users/jeff/git/tailwind-v4-example-sizes
> rimraf packages/*/dist
Scope: 6 of 7 workspace projects
> v3-postcss-merge@0.0.0 build /Users/jeff/git/tailwind-v4-example-sizes/packages/v3-postcss-merge
> tsc && vite build
vite v6.2.0 building for production...
transforming...
✓ 29 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/index-BovOH-IT.css 4.88 kB │ gzip: 1.44 kB
dist/assets/index-CcNtyE8u.js 208.03 kB │ gzip: 66.01 kB
✓ built in 642ms
> v3-postcss-no-merge@0.0.0 build /Users/jeff/git/tailwind-v4-example-sizes/packages/v3-postcss-no-merge
> tsc && vite build
vite v6.2.0 building for production...
transforming...
✓ 28 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/index-BovOH-IT.css 4.88 kB │ gzip: 1.44 kB
dist/assets/index-rZJZ-2Wj.js 186.18 kB │ gzip: 58.74 kB
✓ built in 633ms
> v4-postcss-merge@0.0.0 build /Users/jeff/git/tailwind-v4-example-sizes/packages/v4-postcss-merge
> tsc && vite build
vite v6.2.0 building for production...
transforming...
✓ 29 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/index-CiCvXjtS.css 4.49 kB │ gzip: 1.43 kB
dist/assets/index-BGUzh3H4.js 208.03 kB │ gzip: 66.01 kB
✓ built in 566ms
> v4-postcss-no-merge@0.0.0 build /Users/jeff/git/tailwind-v4-example-sizes/packages/v4-postcss-no-merge
> tsc && vite build
vite v6.2.0 building for production...
transforming...
✓ 28 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/index-CiCvXjtS.css 4.49 kB │ gzip: 1.43 kB
dist/assets/index-orPX37p8.js 186.18 kB │ gzip: 58.74 kB
✓ built in 574ms
> v4-vite-merge@0.0.0 build /Users/jeff/git/tailwind-v4-example-sizes/packages/v4-vite-merge
> tsc && vite build
vite v6.2.0 building for production...
transforming...
✓ 29 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/index-CiCvXjtS.css 4.49 kB │ gzip: 1.43 kB
dist/assets/index-BGUzh3H4.js 208.03 kB │ gzip: 66.01 kB
✓ built in 431ms
> v4-vite-no-merge@0.0.0 build /Users/jeff/git/tailwind-v4-example-sizes/packages/v4-vite-no-merge
> tsc && vite build
vite v6.2.0 building for production...
transforming...
✓ 28 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/index-CiCvXjtS.css 4.49 kB │ gzip: 1.43 kB
dist/assets/index-orPX37p8.js 186.18 kB │ gzip: 58.74 kB
✓ built in 414ms| css file | size | gzip size | build time |
|---|---|---|---|
| v3-postcss-merge | 4.88 kB | 1.44 kB | 642ms |
| v3-postcss-no-merge | 4.88 kB | 1.44 kB | 633ms |
| v4-postcss-merge | 4.49 kB | 1.43 kB | 566ms |
| v4-postcss-no-merge | 4.49 kB | 1.43 kB | 574ms |
| v4-vite-merge | 4.49 kB | 1.43 kB | 431ms |
| v4-vite-no-merge | 4.49 kB | 1.43 kB | 414ms |