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

Add blog posts, cleanup unused files, update components

Browse Source 
- Add 100 blog posts covering AI, development, and tech topics
- Add .env.example for environment configuration
- Add accessibility and lighthouse audit scripts
- Remove obsolete SEO reports and temporary files
- Remove dev-dist build artifacts and backup files
- Remove unused portrait images (moved/consolidated elsewhere)
- Update contact form and component improvements

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
damjan_savic
2026-01-25 11:42:11 +01:00
co-authored by Claude Opus 4.5
parent cba6c66ccc
commit 43484c5023
164 changed files with 60969 additions and 23346 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)