Anleitungen

Praktische Anleitungen zur Umwandlung von CSS in Tailwind-Utilities.

  • CSS im Vergleich zu Tailwind — Klassisches CSS glänzt bei komplexen Selektoren und Animationen. Tailwind colokalisiert visuelle Entscheidungen mit Markup. Die meisten Teams nutzen beides.
  • CSS Abstände zu Tailwind — padding: 1.5rem wird zu p-6. Shorthands werden zu Seiten-Utilities. Off-scale: p-[13px].
  • CSS Typografie zu Tailwind — font-size: 1.5rem → text-2xl. font-weight: 700 → font-bold. Farbe nutzt text-*.
  • CSS Flexbox zu Tailwind — display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.
  • CSS Grid zu Tailwind — grid-template-columns: repeat(3, 1fr) → grid-cols-3. Eigene Tracks nutzen Arbitrary Values.
  • CSS Farben zu Tailwind — Bekannte Hex-Werte mapen auf text-gray-900. Unbekannt: bg-[#1a2b3c].
  • CSS Rahmen zu Tailwind — border: 1px solid → border + border-color. border-radius: 0.5rem → rounded-lg.
  • Responsives CSS zu Tailwind — @media (min-width: 768px) → md:. 1024px → lg:. Komplexe Queries brauchen Prüfung.
  • CSS Schatten zu Tailwind — Übliche Elevation → shadow / shadow-lg. Einzigartige Schatten → Arbitrary Values.
  • CSS Positionierung zu Tailwind — position:absolute → absolute. Seiten mapen auf top/right/bottom/left. Custom z-index → Arbitrary.
  • CSS Migrationsstrategien — Inkrementell migrieren: neue Komponenten in Tailwind, dann Hot Paths, Legacy-CSS bis zum Ersatz behalten.

Konverter öffnen