damjan_savic/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Portfolio Website

Browse Source 
Vollständige Next.js 15 Portfolio-Website mit:
- Blog-System mit 100+ Artikeln
- Supabase-Integration
- Responsive Design mit Tailwind CSS
- TypeScript-Konfiguration
- Testing-Setup mit Vitest und Playwright

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
damjan_savic
2026-02-01 15:07:20 +01:00
co-authored by Claude Opus 4.5
commit e1bbe5455d
315 changed files with 94124 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog-posts/32-tailwind-css-4.md
+465
View File
@@ -0,0 +1,465 @@
# Tailwind CSS 4.0: Die Oxide Engine Revolution
**Meta-Description:** Tailwind CSS 4.0 Deep Dive. Die neue Oxide Engine, CSS-First Konfiguration, Container Queries und Performance-Optimierungen für 2026.
**Keywords:** Tailwind CSS 4, Oxide Engine, CSS Framework, Utility-First CSS, Container Queries, CSS Variables, Performance CSS
---
## Einführung
Tailwind CSS 4.0 ist ein **kompletter Neuschrieb** mit der Oxide Engine in Rust. Full Builds sind 5x schneller, inkrementelle Builds über 100x schneller – gemessen in **Mikrosekunden**.
---
## Performance-Revolution
```
┌─────────────────────────────────────────────────────────────┐
│ TAILWIND 4 PERFORMANCE │
├─────────────────────────────────────────────────────────────┤
│ │
│ Full Build: │
│ ├── Tailwind 3: 960ms │
│ ├── Tailwind 4: 105ms │
│ └── Speedup: ~9x │
│ │
│ Incremental Build: │
│ ├── Tailwind 3: ~50ms │
│ ├── Tailwind 4: <1ms (Mikrosekunden!) │
│ └── Speedup: 100x+ │
│ │
│ Bundle Size: │
│ ├── Tailwind 3: ~15MB installed │
│ ├── Tailwind 4: ~10MB installed │
│ └── Reduktion: 35% │
│ │
└─────────────────────────────────────────────────────────────┘
```
---
## Die Oxide Engine
Die neue Engine kombiniert:
- **Rust** für CPU-intensive Operationen
- **TypeScript** für Extensibility
- **Lightning CSS** für CSS-Parsing
```typescript
// Die kritischen Pfade sind in Rust:
// - Template Scanning
// - Class Extraction
// - CSS Generation
// - Minification
// TypeScript bleibt für:
// - Plugin System
// - Custom Configuration
// - Developer Experience
```
---
## CSS-First Konfiguration
### Tailwind 3: JavaScript Config
```javascript
// tailwind.config.js (alt)
module.exports = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#10b981'
},
fontFamily: {
sans: ['Inter', 'sans-serif']
}
}
},
content: ['./src/**/*.{js,ts,jsx,tsx}']
};
```
### Tailwind 4: CSS Config
```css
/* app.css (neu) */
@import "tailwindcss";
@theme {
/* Colors als CSS Variables */
--color-primary: #3b82f6;
--color-secondary: #10b981;
/* Fonts */
--font-sans: "Inter", sans-serif;
/* Spacing */
--spacing-18: 4.5rem;
/* Custom Breakpoints */
--breakpoint-3xl: 1920px;
}
```
### Vorteile der CSS-First Config
```css
/* Volle CSS-Power nutzbar */
@theme {
/* CSS Calc */
--spacing-golden: calc(1rem * 1.618);
/* Color Functions */
--color-primary-light: color-mix(in oklch, var(--color-primary), white 20%);
/* Media Query im Theme */
@media (prefers-color-scheme: dark) {
--color-background: #0f172a;
}
}
```
---
## Automatische Content Detection
### Tailwind 3: Manuelle Konfiguration
```javascript
// tailwind.config.js
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}'
]
};
```
### Tailwind 4: Automatisch
```css
/* app.css - keine Content-Config nötig! */
@import "tailwindcss";
/* Tailwind 4 erkennt automatisch:
- Alle Dateien im Projekt
- Ignoriert .gitignore
- Ignoriert Binary-Dateien (Bilder, Videos)
- Scannt node_modules intelligent
*/
```
---
## Native Container Queries
### Vorher: Plugin erforderlich
```javascript
// tailwind.config.js (Tailwind 3)
plugins: [
require('@tailwindcss/container-queries')
]
```
### Jetzt: Built-in
```html
<!-- Container definieren -->
<div class="@container">
<!-- Responsive basierend auf Container-Größe -->
<div class="grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3">
<Card />
<Card />
<Card />
</div>
</div>
```
```css
/* Generierte CSS */
@container (min-width: 28rem) {
.\\@md\\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
```
### Named Containers
```html
<div class="@container/sidebar">
<nav class="@lg/sidebar:flex-row flex-col">
<!-- Responsive zu diesem spezifischen Container -->
</nav>
</div>
```
---
## 3D Transform Utilities
```html
<!-- Neue 3D Transforms -->
<div class="transform-3d perspective-1000">
<div class="rotate-x-45 rotate-y-30">
3D rotiertes Element
</div>
</div>
<!-- Preserve 3D -->
<div class="preserve-3d">
<div class="translate-z-20">Vorne</div>
<div class="-translate-z-20">Hinten</div>
</div>
<!-- Backface -->
<div class="backface-hidden rotate-y-180">
Nicht sichtbar wenn gedreht
</div>
```
---
## Entry Animations mit @starting-style
```html
<!-- Element animiert beim Erscheinen -->
<div class="
opacity-100 translate-y-0
starting:opacity-0 starting:translate-y-4
transition-all duration-300
">
Animiert rein
</div>
```
```css
/* Generiertes CSS */
.starting\:opacity-0 {
@starting-style {
opacity: 0;
}
}
.starting\:translate-y-4 {
@starting-style {
transform: translateY(1rem);
}
}
```
---
## Native CSS Variables
```css
/* Alle Design Tokens als CSS Variables */
@theme {
--color-blue-500: #3b82f6;
}
```
```html
<!-- In HTML nutzbar -->
<div class="bg-blue-500">Tailwind Klasse</div>
<div style="background: var(--color-blue-500)">CSS Variable</div>
```
```javascript
// In JavaScript nutzbar
const primaryColor = getComputedStyle(document.documentElement)
.getPropertyValue('--color-blue-500');
```
---
## Vite Plugin für maximale Performance
```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
tailwindcss() // Tight Vite Integration
]
});
```
### Vergleich: PostCSS vs Vite Plugin
| Aspekt | PostCSS | Vite Plugin |
|--------|---------|-------------|
| **HMR** | Gut | Instant |
| **Dev Server Start** | ~500ms | ~100ms |
| **Integration** | Universal | Vite only |
---
## Migration von Tailwind 3
### Automatisches Upgrade Tool
```bash
# Upgrade Tool ausführen
npx @tailwindcss/upgrade
# Was es macht:
# 1. tailwind.config.js → CSS @theme
# 2. @apply Updates
# 3. Deprecated Classes ersetzen
# 4. Plugin-Migration
```
### Manuelle Änderungen
```css
/* Vorher: @tailwind Direktiven */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Nachher: Single Import */
@import "tailwindcss";
```
### Breaking Changes
```html
<!-- Entfernt in v4 -->
<!-- bg-opacity-50 → bg-black/50 (bereits in v3 verfügbar) -->
<div class="bg-black bg-opacity-50">Alt</div>
<div class="bg-black/50">Neu</div>
<!-- Renamed -->
<!-- shadow-sm → shadow-xs -->
<div class="shadow-xs">Neuer Name</div>
```
---
## Browser Support
```
┌─────────────────────────────────────────────────────────────┐
│ BROWSER SUPPORT │
├─────────────────────────────────────────────────────────────┤
│ │
│ ✅ Unterstützt: │
│ ├── Chrome 111+ │
│ ├── Firefox 128+ │
│ ├── Safari 16.4+ │
│ ├── Edge 111+ │
│ └── Alle modernen mobilen Browser │
│ │
│ ❌ Nicht unterstützt: │
│ ├── Internet Explorer (alle Versionen) │
│ └── Legacy Browser ohne CSS Custom Properties │
│ │
│ Anforderungen: │
│ ├── CSS Custom Properties │
│ ├── CSS Cascade Layers │
│ ├── @property Registration │
│ └── color-mix() Function │
│ │
└─────────────────────────────────────────────────────────────┘
```
---
## Best Practices für Tailwind 4
### 1. CSS-First Theme
```css
/* Organisiere Theme logisch */
@theme {
/* === Colors === */
--color-*: ...;
/* === Typography === */
--font-*: ...;
--text-*: ...;
/* === Spacing === */
--spacing-*: ...;
/* === Effects === */
--shadow-*: ...;
--radius-*: ...;
}
```
### 2. Component Classes mit @apply
```css
/* components.css */
@layer components {
.btn {
@apply px-4 py-2 rounded-lg font-medium transition-colors;
}
.btn-primary {
@apply btn bg-primary text-white hover:bg-primary/90;
}
.card {
@apply bg-white rounded-xl shadow-lg p-6;
}
}
```
### 3. Dark Mode
```css
@theme {
/* Light Mode (default) */
--color-background: white;
--color-text: #1f2937;
/* Dark Mode */
@media (prefers-color-scheme: dark) {
--color-background: #0f172a;
--color-text: #f1f5f9;
}
}
```
---
## Fazit
Tailwind CSS 4.0 bringt:
1. **Oxide Engine**: 5-100x schnellere Builds
2. **CSS-First Config**: Keine JS-Config mehr nötig
3. **Container Queries**: Built-in, ohne Plugin
4. **3D Transforms**: Native Utilities
5. **@starting-style**: Entry Animations
Der beste Zeitpunkt zum Upgrade ist jetzt.
---
## Bildprompts
1. "Rust gear and CSS stylesheet merging, Oxide engine concept, technical illustration"
2. "Speed comparison chart showing dramatic improvement, before/after visualization"
3. "CSS variables flowing through design system, modern web development concept"
---
## Quellen
- [Tailwind CSS v4.0 Blog](https://tailwindcss.com/blog/tailwindcss-v4)
- [Tailwind v4 vs v3 Comparison](https://frontend-hero.com/tailwind-v4-vs-v3)
- [Tailwind 4 Performance Guide](https://medium.com/@mernstackdevbykevin/tailwind-css-v4-0-performance-boosts-build-times-jit-more-abf6b75e37bd)
- [Oxide Engine Deep Dive](https://www.dataformathub.com/blog/tailwind-css-v4-deep-dive-why-the-oxide-engine-changes-everything-in-2025-lz4)