Padding on One Side

The button still fits tightly around its text: Adopt Luna. Buttons usually need more room on the left and right than at the top and bottom: Adopt Luna. A p-* class sets all four sides the same, so for directions and single sides, Tailwind has more padding classes:

The letters stand for English words: t for top, r for right, b for bottom and l for left. x and y are the axes you know from math: x is horizontal (left and right) and y vertical (top and bottom). (Tailwind actually writes px-4 as padding-inline: 1rem and py-4 as padding-block: 1rem. In languages written from left to right, these properties are the padding on the left and right, and at the top and bottom.)

Classes can be combined: p-4 pt-8 gives an element 16 pixels on every side except the top, which gets 32. The class for the single side wins whatever the order of the classes, because Tailwind puts the rules for single sides after the rule for all sides in its CSS, and of two equally specific rules, the later one wins, as you know from the cascade. (The order of the classes in the class attribute never matters.) But as you saw in the previous lesson, don't give an element two classes for the same thing, such as p-4 p-6: you can't tell from the HTML which one wins.