In Tailwind-CSS, opvulling is de ruimte tussen de inhoud van het specifieke element en de rand ervan. Horizontale vulling is de ruimte aan de linker- en rechterkant van het element, terwijl verticale vulling is de ruimte aan de boven- en onderkant van een element. Tailwind biedt verschillende utility-klassen om horizontale of verticale opvulling toe te voegen aan de gewenste elementen.
Dit artikel illustreert:
Hoe horizontale opvulling toevoegen in Tailwind?
Om horizontale opvulling toe te voegen aan een element in Tailwind, wordt de klasse 'px-
Syntaxis
< element klas = 'px-0...' > ... element >
Hier vertegenwoordigt 'px' de 'x-as' of 'horizontale opvulling'.
Voorbeeld: horizontale opvulling toepassen op een HTML-element
In dit voorbeeld gebruiken we de ' px-20 ” hulpprogramma klasse met de “ Om verticale opvulling toe te voegen aan een element in Tailwind, gebruikt u de py- Syntaxis Voorbeeld: verticale opvulling toepassen op een HTML-element In dit voorbeeld gebruiken we de ' py-20 ” hulpprogramma klasse met de “ Om de horizontale en verticale opvulling toe te voegen in Tailwind, de ' px-
< lichaam >
< div klas = 'bg-roze-600 px-20 w-max' >
Vulling in Tailwind-CSS
div >
lichaam >
Uitgang 
De bovenstaande uitvoer toont de opvulling aan de linker- en rechterkant van de container. Dit geeft aan dat de horizontale opvulling met succes is toegepast op het containerelement. Hoe verticale vulling toevoegen in Tailwind?
Hier vertegenwoordigt 'py' de 'y-as' of 'verticale opvulling'.
< div klas = 'bg-roze-600 py-20 w-max' >
Vulling in Tailwind-CSS
div >
lichaam >
Uitgang 
De bovenstaande uitvoer toont de opvulling aan de boven- en onderkant van de container. Dit geeft aan dat de verticale opvulling effectief is toegepast op het containerelement. Conclusie