ArticleCheatsheet für Flexbox mit Tailwind

Flexbox ist ein leistungsstarkes Layoutwerkzeug für Webseiten. Unser interaktives Cheatsheet zeigt euch die Layoutmöglichkeiten und jeweils die entsprechenden Tailwind-Klassen dazu.

Wenn man mit der Maus über die CSS-Properties geht ändert sich entsprechend die Vorschau. Und mit einem Click kann sich die Tailwindklasse oder die CSS-Property kopieren.

Bitte beachtet, dass es die Tailwind-Klassen der Version 3 sind.

Quellcode

Das ganze Projekt findet ihr auch auf GitHub https://github.com/hxcode-io/tailwind-flex-cheat-sheet. Die Seite ist mit Vue.js und Typescript entwickelt. Schaut einfach mal rein und falls ihr Anmerkungen habt schreibt mir.

Weitere Resourcen

• Artikel bei CSS-Tricks
• Flexbox-Übersicht mit Animationen
• Flexbox-Einführung bei Mozilla
• Flexbox bei Tailwind

Keywords