```
These patterns form the building blocks for any application. For more component examples, our [Next.js templates guide](/blog/nextjs-templates) shows how production templates implement these patterns at scale.
## Performance Optimization
Tailwind CSS is already optimized by default. These additional steps squeeze out the last bit of performance for production.
### Enable CSS Optimization
```typescript
// next.config.ts
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
optimizeCss: true,
},
}
export default nextConfig
```
This enables Critters-based CSS inlining, which extracts critical CSS and inlines it in the HTML head for faster first paint.
### Production Bundle Size
Tailwind v4 output size by project scale:
| Project Size | Production CSS (gzipped) |
|-------------|-------------------------|
| Empty project | ~6 KB |
| Small app (20 components) | ~10-12 KB |
| Medium app (50+ components) | ~15-20 KB |
| Large app (100+ components) | ~20-25 KB |
For comparison, a single unoptimized CSS framework like Bootstrap is 22 KB gzipped. Your entire Tailwind project will likely produce less CSS than that.
### Avoid Dynamic Class Names
Tailwind scans your source code for class names at build time. Dynamically constructed class names break this scan:
```tsx
// BAD: Tailwind cannot detect this class
const color = 'red'