# Tailwind CSS v4 Migration Log

**Last Updated:** 2026-02-28

Migration from Tailwind CSS v3.4 to v4 completed on the `tailwind-v4-migration` branch.

## Summary

| Item | Before | After |
|------|--------|-------|
| Tailwind | ^3.4.3 | ^4.0.0 |
| PostCSS plugin | tailwindcss, autoprefixer | @tailwindcss/postcss |
| Config | tailwind.config.js (theme.extend) | @theme in src/input.css |
| Entry | @tailwind base/components/utilities | @import "tailwindcss" |

## Changes Applied

1. **Package updates:** tailwindcss ^4.0.0, @tailwindcss/postcss ^4.0.0; removed autoprefixer
2. **PostCSS:** `@tailwindcss/postcss` + cssnano only
3. **CSS entry:** `@import "tailwindcss"`, `@source` for content paths, `@theme` for custom values
4. **Utility renames:** shadow-sm→shadow-xs, backdrop-blur-sm→backdrop-blur-xs, outline-none→outline-hidden
5. **Border compatibility:** @layer base styles for gray-200 default (v4 uses currentColor)

## Audit and Remediation (2026-02-28)

### Deprecated Utilities Migrated

Tailwind v4 removed `*-opacity-*` utilities. Migrated to opacity modifier syntax:

| Deprecated (v3) | Replacement (v4) |
|-----------------|------------------|
| `bg-black bg-opacity-50` | `bg-black/50` |
| `bg-black bg-opacity-10` | `bg-black/10` |
| `bg-gray-500 bg-opacity-40` | `bg-gray-500/40` |
| `bg-ordio-blue bg-opacity-10` | `bg-ordio-blue/10` |
| `bg-white bg-opacity-40` | `bg-white/40` |
| `bg-[#232529] bg-opacity-70` | `bg-[#232529]/70` |
| `ring-1 ring-black ring-opacity-5` | `ring-1 ring-black/5` |
| `focus:ring-ordio-blue focus:ring-opacity-40` | `focus:ring-ordio-blue/40` |

### Empty File Restoration

471+ files were emptied by a prior operation. Restored from `origin/master`:

- `v2/base/header.php`, `html/header.php`, `html/loop/header.php`
- Helpdesk HTML (`docs/content/helpdesk/raw/`)
- Blog post data JSON (`paa-questions.json`, `competitor-analysis.json`, etc.)
- Other docs and v2 files

### Header Dropdown Overlap Fix

Increased dropdown panel z-index from `z-10` to `z-50` in `v2/base/header.php` so the "Funktionen" dropdown correctly overlays page content.

### lexikor Redirect

Added redirect for common typo in `.htaccess`:

```apache
RewriteRule ^insights/lexikor/?$ /insights/lexikon/ [R=301,L,QSA]
RewriteRule ^insights/lexikor/(.*)$ /insights/lexikon/$1 [R=301,L,QSA]
```

## Rollback

```bash
git checkout main -- package.json postcss.config.js src/input.css tailwind.config.js
npm install
npm run build:css && npm run minify
```

## References

- [Tailwind v4 Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide)
- [DEV_TOOLING.md](DEV_TOOLING.md) – Build commands and config