ūü•≥
Black Friday Sale is on: Get Amazing deals on tools and resourcess
postImage

How to Create Tailwind CSS tables

blogImage

By Emmanuel Chinonso

Technical Writer

Introduction

Using Tailwind CSS to create UI components is easy. Tailwind CSS is the first utility CSS framework that allows you, to use low-level utility classes to build fast UI.

Setting up some of these components can be easy and will make it possible for you to use the CSS framework without worrying about fighting it. You can check out some advantages of this framework here.

However, we will use Tailwind CSS to build some tables. Tailwind CSS tables require a bit of code to set it up and may seem complicated. But its really not.

It's as easy as possible and, I will walk you through some Tailwind CSS tables you can start within your projects.

Table of Content

  • Where to start
  • Installing a Tailwind CSS to your project
  • Building the first table
  • Building the second table
  • Building the third table
  • Conclusion

Where to start

We will start by creating a project directory.

Code:

1Mkdir build-Tailwind-tables & cd build-Tailwind-tables

The code above will create an empty directory and also direct you to the directory. These will become your current working directory. At this stage we can now initialize our project by writing this code.

Code:

1npm init -y.

this will create a package.json file on the current directory.

Installing Tailwind CSS

At this stage we can go ahead to install tailwind css to our project. We can do this by running the following code. Using npm .

Code:

1npm install tailwindcss.

when using yarn

Code:

1yarn add tailwindcss.

We can go ahead to create a style sheet file at this stage. This style sheet file is where we will compile our tailwind.css file into using the tailwind TLC tool. We can call this style sheet file style.css.

Inside the tailwind.css file we will use @tailwind directive to inject tailwind’s base, components and utilities. Like the code below

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

For some of us that might wish to customize their tailwind css utilities. This can be done by writing the following code on the terminal.

Code:

1npx tailwindcss init

The command above will automatically generate a tailwind.config.js file. This file is where you can modify or customize any utility on tailwind. The generated file will look like the code below.

Code:

1module.exports = {
2 theme: {
3 extend: {},
4 },
5 variants: {
6 extend: {},
7 },
8 plugins: [],
9};

The next thing to do is to process our CSS. We can do this by running the following command on our terminal

Code:

1npx tailwindcss build styles.css -o tailwind.css.

The code above will generate our tailwind css codes and will get the project ready for you.

Building the table

After the installation of tailwind css. The next thing we are to do is to create an index.html file. Inside the html file we will write the following code

Code:

1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Tailwind tables</title>
8 <link rel="stylesheet" href="style.css" />
9 </head>
10 <body></body>
11</html>
12.

The code above is a HTML template which contains the link to the processed Tailwind CSS. We linked the style.css to our HTML template to enable us use Tailwind CSS utilities in our code.

Adding the styles.

We can now go ahead to code the body of the table and add some tailwind CSS utility styles.

Code:

1<div class="container flex justify-center mx-auto">
2 <div class="flex flex-col">
3 <div class="w-full">
4 <div class="border-b border-gray-200 shadow">
5 <table class="divide-y divide-green-400 ">
6 <thead class="bg-gray-50">
7 <tr>
8 <th class="px-6 py-2 text-xs text-gray-500">
9 ID
10 </th>
11 <th class="px-6 py-2 text-xs text-gray-500">
12 Name
13 </th>
14 <th class="px-6 py-2 text-xs text-gray-500">
15 Email
16 </th>
17 <th class="px-6 py-2 text-xs text-gray-500">
18 Created_at
19 </th>
20 <th class="px-6 py-2 text-xs text-gray-500">
21 Edit
22 </th>
23 <th class="px-6 py-2 text-xs text-gray-500">
24 Delete
25 </th>
26 </tr>
27 </thead>
28 <tbody class="bg-white divide-y divide-gray-300">
29 <tr class="whitespace-nowrap">
30 <td class="px-6 py-4 text-sm text-gray-500">
31 1
32 </td>
33 <td class="px-6 py-4">
34 <div class="text-sm text-gray-900">
35 Adam joe
36 </div>
37 </td>
38 <td class="px-6 py-4">
39 <div class="text-sm text-gray-500">adamjoe@example.com</div>
40 </td>
41 <td class="px-6 py-4 text-sm text-gray-500">
42 2021-12-12
43 </td>
44 <td class="px-6 py-4">
45 <a href="#">
46 <svg
47 xmlns="http://www.w3.org/2000/svg"
48 class="w-6 h-6 text-blue-400"
49 fill="none"
50 viewBox="0 0 24 24"
51 stroke="currentColor"
52 >
53 <path
54 stroke-linecap="round"
55 stroke-linejoin="round"
56 stroke-width="2"
57 d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
58 />
59 </svg>
60 </a>
61 </td>
62 <td class="px-6 py-4">
63 <a href="#">
64 <svg
65 xmlns="http://www.w3.org/2000/svg"
66 class="w-6 h-6 text-red-400"
67 fill="none"
68 viewBox="0 0 24 24"
69 stroke="currentColor"
70 >
71 <path
72 stroke-linecap="round"
73 stroke-linejoin="round"
74 stroke-width="2"
75 d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
76 />
77 </svg>
78 </a>
79 </td>
80 </tr>
81 <tr class="whitespace-nowrap">
82 <td class="px-6 py-4 text-sm text-gray-500">
83 2
84 </td>
85 <td class="px-6 py-4">
86 <div class="text-sm text-gray-900">
87 Jon doe
88 </div>
89 </td>
90 <td class="px-6 py-4">
91 <div class="text-sm text-gray-500">jhondoe@example.com</div>
92 </td>
93 <td class="px-6 py-4 text-sm text-gray-500">
94 2021-1-12
95 </td>
96 <td class="px-6 py-4">
97 <a href="#">
98 <svg
99 xmlns="http://www.w3.org/2000/svg"
100 class="w-6 h-6 text-blue-400"
101 fill="none"
102 viewBox="0 0 24 24"
103 stroke="currentColor"
104 >
105 <path
106 stroke-linecap="round"
107 stroke-linejoin="round"
108 stroke-width="2"
109 d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
110 />
111 </svg>
112 </a>
113 </td>
114 <td class="px-6 py-4">
115 <a href="#">
116 <svg
117 xmlns="http://www.w3.org/2000/svg"
118 class="w-6 h-6 text-red-400"
119 fill="none"
120 viewBox="0 0 24 24"
121 stroke="currentColor"
122 >
123 <path
124 stroke-linecap="round"
125 stroke-linejoin="round"
126 stroke-width="2"
127 d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
128 />
129 </svg>
130 </a>
131 </td>
132 </tr>
133 <tr class="whitespace-nowrap">
134 <td class="px-6 py-4 text-sm text-gray-500">
135 3
136 </td>
137 <td class="px-6 py-4">
138 <div class="text-sm text-gray-900">
139 Emily chan
140 </div>
141 </td>
142 <td class="px-6 py-4">
143 <div class="text-sm text-gray-500">emilychan@example.com</div>
144 </td>
145 <td class="px-6 py-4 text-sm text-gray-500">
146 2021-1-12
147 </td>
148 <td class="px-6 py-4">
149 <a href="#">
150 <svg
151 xmlns="http://www.w3.org/2000/svg"
152 class="w-6 h-6 text-blue-400"
153 fill="none"
154 viewBox="0 0 24 24"
155 stroke="currentColor"
156 >
157 <path
158 stroke-linecap="round"
159 stroke-linejoin="round"
160 stroke-width="2"
161 d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
162 />
163 </svg>
164 </a>
165 </td>
166 <td class="px-6 py-4">
167 <a href="#">
168 <svg
169 xmlns="http://www.w3.org/2000/svg"
170 class="w-6 h-6 text-red-400"
171 fill="none"
172 viewBox="0 0 24 24"
173 stroke="currentColor"
174 >
175 <path
176 stroke-linecap="round"
177 stroke-linejoin="round"
178 stroke-width="2"
179 d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
180 />
181 </svg>
182 </a>
183 </td>
184 </tr>
185 <tr class="whitespace-nowrap">
186 <td class="px-6 py-4 text-sm text-gray-500">
187 4
188 </td>
189 <td class="px-6 py-4">
190 <div class="text-sm text-gray-900">
191 susan coby
192 </div>
193 </td>
194 <td class="px-6 py-4">
195 <div class="text-sm text-gray-500">susancoby@example.com</div>
196 </td>
197 <td class="px-6 py-4 text-sm text-gray-500">
198 2021-1-12
199 </td>
200 <td class="px-6 py-4">
201 <a href="#">
202 <svg
203 xmlns="http://www.w3.org/2000/svg"
204 class="w-6 h-6 text-blue-400"
205 fill="none"
206 viewBox="0 0 24 24"
207 stroke="currentColor"
208 >
209 <path
210 stroke-linecap="round"
211 stroke-linejoin="round"
212 stroke-width="2"
213 d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
214 />
215 </svg>
216 </a>
217 </td>
218 <td class="px-6 py-4">
219 <a href="#">
220 <svg
221 xmlns="http://www.w3.org/2000/svg"
222 class="w-6 h-6 text-red-400"
223 fill="none"
224 viewBox="0 0 24 24"
225 stroke="currentColor"
226 >
227 <path
228 stroke-linecap="round"
229 stroke-linejoin="round"
230 stroke-width="2"
231 d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
232 />
233 </svg>
234 </a>
235 </td>
236 </tr>
237 </tbody>
238 </table>
239 </div>
240 </div>
241 </div>
242</div>
243.

Our webpage will look like the image below.

tables

Conclusion

Tailwind CSS utilities make it easy to build beautiful tables for your webpage. We looked at how we can use Tailwind CSS to build beautiful tables and install Tailwind CSS to your project. By now, you should be able to use Tailwind CSS to build beautiful tables.

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...