Written by Nirmalya Ghosh✏️
This tutorial will demonstrate how easy it is to build components using Tailwind CSS. We’ll be creating a table component and then using Tailwind to design a better variant of it.
Introduction
I’ve used Tailwind CSS in a few of my projects, and I’ve saved a lot of time using it. It comes with a default set of utility classes, which helps to build good-looking components by default and in a very simple way.
If we look at the example component, we can see the difference.
To create the above card component, we’ll 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 would be:
<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, using Tailwind, we can create components much faster and using far less code.
Getting started
First, let’s create our project directory:
mkdir build-components-using-tailwind && cd build-components-using-tailwind
This will create an empty build-components-using-tailwind directory as well as change our current working directory.
Next, we’ll have to initialize our project with npm:
npm init -y
The above command will create a package.json file inside our current working directory:
Installing Tailwind
We can install Tailwind from npm:
# Using npm
npm install tailwindcss
# Using Yarn
yarn add tailwindcss
This will add tailwindcss to our list of 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, from which we’ll compile a new tailwind.css file using the Tailwind CLI tool later on.
Next, we need to use the @tailwind directive to inject Tailwind’s base, components, and utilities styles into your 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 will create a minimal tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Next, we need to 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, we’ll have to install the necessary dependencies to our project:
# Using npm
npm install postcss-cli --save-dev
# Using Yarn
yarn add postcss-cli -D
This will add postcss-cli to our dev dependencies:
We’ll be compiling our styles only during development. While deploying to production, we’ll be shipping our compiled styles. As a result, we need postcss-cli only during development.
We also need to 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 will compile the styles present in the styles.css file and generate 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.
Creating a table component
In this section, we’ll be creating a table using HTML, and then, we’ll use Tailwind utility classes to give it a much better look.
So, let’s write 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 will create the following component:
Adding Tailwind to our table component
Let’s add some Tailwind utility classes to make it 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 will look like the following:
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. Using 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.
LogRocket is like a DVR for web apps, recording everything that happens in your web app or site. 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 apps — Start monitoring for free.
The post Building a table component with Tailwind CSS appeared first on LogRocket Blog.
Top comments (0)