https://github.com/skratchdot/tailwind-v4-example-sizes
This repo contains 6 different tailwindcss projects (to help debug tailwindcss build output from `v3` to `v4`)
https://github.com/skratchdot/tailwind-v4-example-sizes
Last synced: 8 months ago
JSON representation
This repo contains 6 different tailwindcss projects (to help debug tailwindcss build output from `v3` to `v4`)
- Host: GitHub
- URL: https://github.com/skratchdot/tailwind-v4-example-sizes
- Owner: skratchdot
- Created: 2025-01-28T03:16:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-06T14:58:18.000Z (over 1 year ago)
- Last Synced: 2025-09-08T07:44:47.472Z (10 months ago)
- Language: TypeScript
- Size: 529 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tailwind-v4-example-sizes
This repo contains 6 different tailwindcss projects (to help debug tailwindcss build output from `v3` to `v4`).
See:
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-merge` and setups that don't
## Installation
1. clone: `git clone git@github.com:skratchdot/tailwind-v4-example-sizes.git`
2. install: `pnpm install`
3. build: `pnpm build`
## Build Output
```shell
➜ 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 Output
| css file | size | gzip size | build time |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------: | --------: | ---------: |
| [v3-postcss-merge](https://raw.githubusercontent.com/skratchdot/tailwind-v4-example-sizes/refs/heads/main/packages/v3-postcss-merge/dist/assets/index-BovOH-IT.css) | 4.88 kB | 1.44 kB | 642ms |
| [v3-postcss-no-merge](https://raw.githubusercontent.com/skratchdot/tailwind-v4-example-sizes/refs/heads/main/packages/v3-postcss-no-merge/dist/assets/index-BovOH-IT.css) | 4.88 kB | 1.44 kB | 633ms |
| [v4-postcss-merge](https://raw.githubusercontent.com/skratchdot/tailwind-v4-example-sizes/refs/heads/main/packages/v4-postcss-merge/dist/assets/index-CiCvXjtS.css) | 4.49 kB | 1.43 kB | 566ms |
| [v4-postcss-no-merge](https://raw.githubusercontent.com/skratchdot/tailwind-v4-example-sizes/refs/heads/main/packages/v4-postcss-no-merge/dist/assets/index-CiCvXjtS.css) | 4.49 kB | 1.43 kB | 574ms |
| [v4-vite-merge](https://raw.githubusercontent.com/skratchdot/tailwind-v4-example-sizes/refs/heads/main/packages/v4-vite-merge/dist/assets/index-CiCvXjtS.css) | 4.49 kB | 1.43 kB | 431ms |
| [v4-vite-no-merge](https://raw.githubusercontent.com/skratchdot/tailwind-v4-example-sizes/refs/heads/main/packages/v4-vite-no-merge/dist/assets/index-CiCvXjtS.css) | 4.49 kB | 1.43 kB | 414ms |