Editor’s note: This post was updated on 4 February 2022 to update any outdated information and add the Adding Tailwind CSS table borders section.
Tailwind CSS comes with a default set of utility classes that helps developers build good-looking components by default and in a very simple way.
In this tutorial, we will learn how easy it is to build components using Tailwind CSS by creating a table component and using Tailwind to design a better variant of it. We’ll cover:
- How do you make a component with Tailwind?
- Setting up Tailwind CSS
- Installing Tailwind CSS
- Adding Tailwind to our project dependencies
- Processing the CSS
- How do you create a table in Tailwind?
- Adding Tailwind to our table component
- Adding Tailwind CSS table borders
- Adding table borders with Tailwind CSS
border-separate - Adding
border-collapseto our table component in Tailwind CSS
How do you make a component with Tailwind?
We’ll start by building a sample card component, like the one below:
To create the above card component, we need the following HTML:
<div class="card">
<div class="card-content">
<h4 class="card-title">John Doe</h4>
<p class="card-message">Web Developer at Acme</p>
</div>
</div>
<style>
.card {
display: flex;
width: 25%;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.card-content {
padding-top: 0.25rem;
}
.card-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
.card-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}
</style>
The equivalent of the above HTML and CSS using Tailwind is the following:
<div class="w-1/4 mx-auto flex p-6 bg-white rounded-lg shadow-xl">
<div class="pt-1">
<h4 class="text-xl text-gray-900 leading-tight">John Doe</h4>
<p class="text-base text-gray-600 leading-normal">
Web Developer at Acme
</p>
</div>
</div>
As we can see when using Tailwind, we can create components much faster and using far less code.
Setting up Tailwind CSS
To begin crafting our table component, let’s first create our project directory:
mkdir build-components-using-tailwind && cd build-components-using-tailwind
This creates an empty build-components-using-tailwind directory as well as change our current working directory.
Next, let’s initialize our project with npm:
npm init -y
This command creates a package.json file inside our current working directory:
Installing Tailwind CSS
We can install Tailwind from npm:
# Using npm npm install tailwindcss # Using Yarn yarn add tailwindcss
This adds tailwindcss to our list of dependencies.
Adding Tailwind to our project dependencies
Next, we’ll create an HTML file with some default contents:
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="stylesheet" href="tailwind.css" />
<title>Tailwind</title>
</head>
<body>
</body>
</html>
We also need to create an empty styles.css file to compile a new tailwind.css file using the Tailwind CLI tool later on.
Next, we must use the @tailwind directive to inject Tailwind’s base, components, and utilities styles into the CSS:
// tailwind.css @tailwind base; @tailwind components; @tailwind utilities;
We can also create a Tailwind configuration file if we want to customize our Tailwind installation:
npx tailwindcss init
The above command creates a minimal tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Processing the CSS
Next, let’s use the Tailwind CLI tool to process our CSS:
npx tailwindcss build styles.css -o tailwind.css
We can also use PostCSS to configure our Tailwind installation. To do that, install the necessary dependencies to the project:
# Using npm npm install postcss-cli --save-dev # Using Yarn yarn add postcss-cli -D
This adds postcss-cli to our devDependencies:
We’ll compile our styles only during development; while deploying to production, we’ll ship our compiled styles. As a result, we need postcss-cli only during development.
We must also create a postcss.config.js file to configure PostCSS:
// postcss.config.js
module.exports = {
plugins: [require("tailwindcss")]
};
Next, we need to add a script in our package.json file for compiling our Tailwind styles:
// package.json
"scripts": {
"tailwind:watch": "postcss styles.css -o tailwind.css"
},
This script compiles the styles present in the styles.css file and generates a new tailwind.css file. So, let’s run our script and generate a tailwind.css file with the following command:
yarn tailwind:watch
Now, let’s build our first component using Tailwind.
How do you create a table in Tailwind?
In this section, we’ll create a table using HTML and use the Tailwind utility classes to give it a much better look.
So, let’s write a table component in HTML:
// index.html
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Dante Sparks</td>
<td>Italy</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Neal Garrison</td>
<td>Spain</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Maggie O'Neill</td>
<td>Austria</td>
</tr>
</table>
The above HTML creates the following basic table component:
Adding Tailwind to our table component
Now, let’s add some Tailwind utility classes to make our component better:
// index.html
<table class="shadow-lg bg-white">
<tr>
<th class="bg-blue-100 border text-left px-8 py-4">Company</th>
<th class="bg-blue-100 border text-left px-8 py-4">Contact</th>
<th class="bg-blue-100 border text-left px-8 py-4">Country</th>
</tr>
<tr>
<td class="border px-8 py-4">Alfreds Futterkiste</td>
<td class="border px-8 py-4">Dante Sparks</td>
<td class="border px-8 py-4">Italy</td>
</tr>
<tr>
<td class="border px-8 py-4">Centro comercial Moctezuma</td>
<td class="border px-8 py-4">Neal Garrison</td>
<td class="border px-8 py-4">Spain</td>
</tr>
<tr>
<td class="border px-8 py-4">Ernst Handel</td>
<td class="border px-8 py-4">Maggie O'Neill</td>
<td class="border px-8 py-4">Austria</td>
</tr>
</table>
After adding the above classes to the HTML, our table component looks like the following:
Adding Tailwind CSS table borders
Adding table borders with Tailwind CSS border-separate
Currently, our table component has each cell sharing a common border.
Here, each cell borrows some of its borders from either the adjacent, top, or bottom cells. For example, the rightmost cells share their left, top, and bottom borders with their sibling cells.
Learn more →Now, we can force each cell in the table to have its own borders. To do that, we use the Tailwind CSS property border-separate.
So, let’s add border-separate to the table element:
<table class="shadow-lg bg-white border-separate">
<tr>
<th class="bg-blue-100 border text-left px-8 py-4">Company</th>
<th class="bg-blue-100 border text-left px-8 py-4">Contact</th>
<th class="bg-blue-100 border text-left px-8 py-4">Country</th>
</tr>
<tr>
<td class="border px-8 py-4">Alfreds Futterkiste</td>
<td class="border px-8 py-4">Dante Sparks</td>
<td class="border px-8 py-4">Italy</td>
</tr>
<tr>
<td class="border px-8 py-4">Centro comercial Moctezuma</td>
<td class="border px-8 py-4">Neal Garrison</td>
<td class="border px-8 py-4">Spain</td>
</tr>
<tr>
<td class="border px-8 py-4">Ernst Handel</td>
<td class="border px-8 py-4">Maggie O'Neill</td>
<td class="border px-8 py-4">Austria</td>
</tr>
</table>
Our table component now looks like this:
Now, each cell has its own border. Also notice that a little padding was added to depict the separating.
This border-separate is the same as border-collapse: separate in CSS.
Adding border-collapse to our table component in Tailwind CSS
Now inversely, we can make the cells of our table component share a common border with their adjacent cells with border-collapse.
So, let’s add border-collapse on the top-level table element:
<table class="shadow-lg bg-white border-collapse">
<tr>
<th class="bg-blue-100 border text-left px-8 py-4">Company</th>
<th class="bg-blue-100 border text-left px-8 py-4">Contact</th>
<th class="bg-blue-100 border text-left px-8 py-4">Country</th>
</tr>
<tr>
<td class="border px-8 py-4">Alfreds Futterkiste</td>
<td class="border px-8 py-4">Dante Sparks</td>
<td class="border px-8 py-4">Italy</td>
</tr>
<tr>
<td class="border px-8 py-4">Centro comercial Moctezuma</td>
<td class="border px-8 py-4">Neal Garrison</td>
<td class="border px-8 py-4">Spain</td>
</tr>
<tr>
<td class="border px-8 py-4">Ernst Handel</td>
<td class="border px-8 py-4">Maggie O'Neill</td>
<td class="border px-8 py-4">Austria</td>
</tr>
</table>
Our table component now looks like this:
Note that using border-collapse in Tailwind CSS is the same as using the border-collapse: collapse property in CSS.
Conclusion
The table component that we built here is available on GitHub. With the help of Tailwind, it becomes very easy to develop beautiful components and through the use of utility classes, we can build components in very few lines of code.
Is your frontend hogging your users' CPU?
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
https://logrocket.com/signup/LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — Start monitoring for free.
