# tailwind-v4-example-sizes **Repository Path**: mirrors_skratchdot/tailwind-v4-example-sizes ## Basic Information - **Project Name**: tailwind-v4-example-sizes - **Description**: This repo contains 6 different tailwindcss projects (to help debug tailwindcss build output from `v3` to `v4`) - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-02-16 - **Last Updated**: 2026-05-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## 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 |