Mezery podle šířky

Rozvržení stránky teď funguje v každé šířce, tak se podívejme na detaily. Obrazovka mobilu je malá a mezery, které na počítači působí vzdušně, na mobilu jen zabírají místo. Úvodní sekce má py-24, tedy 96 px nad obsahem i pod ním, takže na mobilu je kolem krátkého textu spousta prázdného místa.

Předpona funguje s každou třídou Tailwindu, nejen s rozvržením: i s mezerami, rozměry, barvami a písmem. Postup je stejný jako u nadpisu: menší mezery bez předpony a větší s předponou md:. Například:

<section class="px-4 py-12 md:px-8 md:py-24">

Tato sekce má na mobilu polstrování 16 px po stranách a 48 px nahoře a dole, od 768 px pak 32 px a 96 px. Každá třída s předponou mění jen svou vlastnost: md:py-24 změní polstrování nahoře a dole a strany nechá na třídách px-4 a md:px-8.

Stejně se mění i velikost textu, jak jste viděli u nadpisu: text-4xl md:text-6xl.