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.
A demo
Next, let's build something with TailwindCSS to see how it works:
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 <script src="https://cdn.tailwindcss.com"></script>
8 </head>
9
10 <body>
11 <div class="flex flex-row gap-4">
12 <div class="flex flex-col gap-4 border-2 border-black rounded-md p-4">
13 <img
14 class="w-full rounded-md"
15 src="https://images.unsplash.com/photo-1706820642350-805585dd2adc?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDkxOTI3MDd8&ixlib=rb-4.0.3&q=85"
16 alt="image" />
17 <h2 class="font-mono text-xl font-bold">
18 Lorem ipsum dolor sit amet consectetur adipisicing elit
19 </h2>
20 <p class="font-mono text-base">
21 Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
22 delectus quibusdam porro quos officiis possimus molestias ullam
23 officia consectetur expedita sed labore similique, excepturi voluptas
24 fugiat ex error quod? Beatae.
25 </p>
26 </div>
27
28 . . .
29 </div>
30 </body>
31</html>This is the same blog post grid we've created before, and we are able to recreate it without writing a single line of CSS.
Creating a form using TailwindCSS
To wrap up this lesson, we are going to create a web form using the TailwindCSS framework.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 <script src="https://cdn.tailwindcss.com"></script>
8 </head>
9
10 <body class="bg-gray-900">
11 <form
12 action="#"
13 method="post"
14 class="flex flex-col gap-4 max-w-sm rounded-md shadow-xl mx-auto my-20 px-8 py-12 font-serif bg-gray-100">
15 <h2 class="text-center text-2xl capitalize underline mb-4">
16 Please fill out the form
17 </h2>
18 <div>
19 <label for="name" class="hidden">Name</label>
20 <input
21 type="text"
22 id="name"
23 name="name"
24 required
25 placeholder="Name"
26 class="w-full px-4 py-2 border-2 rounded-md focus:ring focus:ring-offset-2 focus:ring-violet-500 focus:outline-violet-200" />
27 </div>
28
29 <div>
30 <label for="email" class="hidden">Email</label>
31 <input
32 type="email"
33 id="email"
34 name="email"
35 required
36 placeholder="Email"
37 class="w-full px-4 py-2 border-2 rounded-md focus:ring focus:ring-offset-2 focus:ring-violet-500 focus:outline-violet-200" />
38 </div>
39
40 <div>
41 <label for="message" class="hidden">Message</label>
42 <textarea
43 id="message"
44 name="message"
45 rows="4"
46 required
47 placeholder="Message"
48 class="w-full px-4 py-2 border-2 rounded-md focus:ring focus:ring-offset-2 focus:ring-violet-500 focus:outline-violet-200"></textarea>
49 </div>
50
51 <input
52 type="submit"
53 value="Submit"
54 class="border-2 border-violet-500 bg-violet-500 hover:border-violet-700 hover:bg-violet-700 focus:border-violet-900 focus:bg-violet-900 focus:outline-none focus:ring focus:ring-violet-200 transition-all duration-150 text-gray-100 font-sans uppercase font-bold rounded-md px-4 py-2" />
55 </form>
56 </body>
57</html>
There are a few things we need to talk about here. First of all, focus: and hover: are pseudo-selectors. focus: activates when the form element is in focus, and hover: activates when the cursor hovers over the element.
px-* defines horizontal padding and py-* defines vertical padding. p-* define padding in all directions. m-* specifies margins in the same manner.
*-<color>-<number> is how colors are specified in TailwindCSS. You can find the color pallet in the linked article.