TailwindCSS

Möchte man bei einem Element z.B. die Textfarbe ändern, sobald die Maus über das Element fährt, kann man dies mit der :hover Pseudoklasse erreichen. Ein einfaches Beispiel dafür könnte so aussehen: Sobald der User mit der Maus über den Text fährt, wird der Text in dunklerem Rot angezeigt.

Angenommen wir haben folgende Situation: Wir haben ein Elternelement und darin ein Kindelement. Dieses Kindelement soll in dem Elternelement zentriert werden. Die Ausgangssituation könnte so aussehen: Wir haben eine Elternbox (in hellem rot) und eine Kindbox (in blau). Die blaue Box soll nun in das Zentrum von der Elternbox gesetzt werden. <div class=“border-1 h-80 w-80 …

Angenommen man hat folgendes Problem: Man hat eine Reihe von div’s und das letzte div in dieser Reihe soll den Rest der Breite ausfüllen. Dann kann man das über die flex Klasse einfach lösen. Folgendes Beispiel: <div class=“flex“> <div class=“border-1 border p-2″>Hi You</div> <div class=“border-1 border p-2″>World</div> <div class=“border-1 border p-2″>Nice to meet you</div> <div …