Nirmalya Ghosh I'm a computer science engineer specializing in web design and development with an eye for detail. I have 3+ years experience with React.js and also fiddle with Ruby on Rails and Elixir.

Building a table component with Tailwind CSS

4 min read 1223

Building A Table Component with Tailwind CSS

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.

Sample HTML Card Component
Sample card component.

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:

We made a custom demo for .
No really. Click here to check it out.

Our Default package.json File
Our default package.json file.

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.

Adding Tailwind To Our 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, 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:

Generating A Tailwind Config File
Generating a Tailwind config 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
Generating A tailwind.css File
Generating a tailwind.css file.

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:

Adding The PostCSS CLI To Our Dependencies
Adding postcss-cli as a dependency.

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
Generating Our tailwind.css File With postcss-cli
Generating our tailwind.css file using postcss-cli.

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:

Basic HTML Table Component
Basic table 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:

Styled Table Component
Table component styled with Tailwind 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. 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.https://logrocket.com/signup/

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 — .

Nirmalya Ghosh I'm a computer science engineer specializing in web design and development with an eye for detail. I have 3+ years experience with React.js and also fiddle with Ruby on Rails and Elixir.

Leave a Reply