Introduction to Tailwind

Tailwind was first released back in 2017, just one year after the first release of Svelte. It’s a utility-first CSS framework where each CSS property has a single class. This is also known as the atomic CSS approach. This approach helps us rapidly build interfaces without actually having to write any CSS. Instead, all our CSS lives inside the HTML and is defined through classes. What does that look like? Take a look at this example:

Here, we have an h1 with the following classes for styling:

• p-3 for a 12px padding

• bg-blue-500 for a blue background

• text-white for a white text color

• font-bold for a font weight of 700

• text-center for aligning the text center horizontally

This may seem a bit difficult to understand at first if you've never worked with a CSS utility framework. The more you use ...