tailwind: Consider the following HTML page with all the attached tailwind classes.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-yellow-200 p-4 m-4">
<h1 class="text-2xl font-bold underline">
Hello world!
</h1>
<p class="text-lg text-gray-400 bg-slate-200 m-8 p-6">
This is a Tailwind CSS example.
</p>
<p class="text-lg text-gray-400 bg-slate-800 p-6">
This another Tailwind CSS example.
</p>
</div>
</body>
</html>
Notice how there are some elements with m-4 and p-4 classes. These classes are used to add margin and padding to the elements. The m stands for margin and the p stands for padding. The number after the letter is the size of the margin or padding.
Besides being able to set the margin and padding on all sides of the elements you can also be more specific. You can set the margin or padding on a specific side by adding a letter after the number. The letters are t, r, b, l for top, right, bottom and left respectively. You can also use x and y to set the margin or padding on the x-axis or y-axis.
This convention works for padding and margin but you'll also find it in many other tailwind utilities such as width and height.
Protip
If you want to get more of a feeling of all these different settings it can really be helpful to add explicit background colors. These really allow you to see the different elements and how they are spaced out.