Previously, we introduced a new way to organize your CSS code. Instead of creating a single class that applies all the styles like this:
1.card {
2 width: 400px;
3 height: fit-content;
4
5 display: flex;
6 flex-direction: column;
7 gap: 10px;
8
9 border: solid 2px;
10 border-radius: 10px;
11
12 margin: 10px;
13 padding: 10px;
14}We create small, single-purpose classes. Making sure each class only does one thing.
1.flex {
2 display: flex;
3}
4
5.flex-row {
6 flex-direction: row;
7}
8
9.flex-col {
10 flex-direction: column;
11}
12
13.gap {
14 gap: 10px;
15}
16
17. . .This way, the classes can be reused anywhere. And this method also avoids unnecessary repetitions.
Getting started with TailwindCSS
This is basically what a CSS framework is, a set of predefined utility classes that you can use directly in your project. Using a framework will save you the trouble of designing these classes yourself, and can greatly accelerate your development process.
One of the most popular CSS framework is TailwindCSS. To get started, you can load the script through its CDN like this:
1<!doctype html>
2<html>
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <script src="https://cdn.tailwindcss.com"></script>
7 </head>
8 <body>
9 <h1 class="text-3xl font-bold underline">Hello world!</h1>
10 </body>
11</html>You should note that this method is designed for development purpose only. It is not recommended in a production environment. To learn how to set up TailwindCSS for production, please refer to the official documentation.