Building a table component with Tailwind CSS
Tags: tutorial, css, tailwindcss
Published: 2020-05-08 15:45:25

---
title: Building a table component with Tailwind CSS
published: true
date: 2020-04-13 16:00:29 UTC
tags: tutorial,css,tailwind
canonical_url: https://blog.logrocket.com/building-a-table-component-with-tailwind-css/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/n1fq5z6wmit7oeqxviph.jpeg
---
**Written by [Nirmalya Ghosh](https://blog.logrocket.com/author/nirmalyaghosh/)**✏️

This tutorial will demonstrate how easy it is to build components using [Tailwind CSS](https://tailwindcss.com/). 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](https://tailwindcss.com/docs/utility-first), 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](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/sample-html-card-component.png?resize=730%2C333&ssl=1)<figcaption id="caption-attachment-16863">Sample card component.</figcaption>

To create the above card component, we’ll need the following HTML:

```jsx
<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:

```jsx
<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.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## Getting started

First, let’s create our project directory:

```jsx
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](https://docs.npmjs.com/cli/init):

```jsx
npm init -y
```

The above command will create a `package.json` file inside our current working directory:

![Our Default package.json File](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/default-package.json-file.png?resize=730%2C383&ssl=1)<figcaption id="caption-attachment-16865">Our default package.json file.</figcaption>

## Installing Tailwind

We can install Tailwind from npm:

```jsx
# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss
```

This will add `tailwindcss` to our list of dependencies.

![Adding Tailwind To Our Dependencies](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/adding-tailwind-dependencies.png?resize=730%2C388&ssl=1)<figcaption id="caption-attachment-16866">Adding Tailwind to our project dependencies.</figcaption>

Next, we’ll create an HTML file with some default contents:

```jsx
// 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:

```jsx
// tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;
```

We can also create a Tailwind configuration file if we want to [customize our Tailwind installation](https://tailwindcss.com/docs/configuration/):

```jsx
npx tailwindcss init
```

The above command will create a minimal `tailwind.config.js` file:

![Generating A Tailwind Config File](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/generating-tailwind-config-file.png?resize=730%2C287&ssl=1)<figcaption id="caption-attachment-16868">Generating a Tailwind config file.</figcaption>

```jsx
// tailwind.config.js

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

Next, we need to use the Tailwind CLI tool to process our CSS:

```jsx
npx tailwindcss build styles.css -o tailwind.css
```

![Generating A tailwind.css File](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/generating-tailwind.css-file.png?resize=730%2C283&ssl=1)<figcaption id="caption-attachment-16870">Generating a tailwind.css file.</figcaption>

We can also use [PostCSS](https://tailwindcss.com/docs/installation/#using-tailwind-with-postcss) to configure our Tailwind installation. To do that, we’ll have to install the necessary dependencies to our project:

```jsx
# 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](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/adding-postcss-cli-dependency.png?resize=730%2C230&ssl=1)<figcaption id="caption-attachment-16872">Adding postcss-cli as a dependency.</figcaption>

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:

```jsx
// 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:

```jsx
// 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:

```jsx
yarn tailwind:watch
```

![Generating Our tailwind.css File With postcss-cli](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/tailwind.css-file-postcss-cli.png?resize=730%2C208&ssl=1)<figcaption id="caption-attachment-16873">Generating our tailwind.css file using postcss-cli.</figcaption>

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:

```jsx
// 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](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/basic-html-table-component.png?resize=730%2C332&ssl=1)<figcaption id="caption-attachment-16876">Basic table component.</figcaption>

## Adding Tailwind to our table component

Let’s add some Tailwind utility classes to make it better.

```jsx
// 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](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/styled-table-component.png?resize=730%2C332&ssl=1)<figcaption id="caption-attachment-16878">Table component styled with Tailwind CSS.</figcaption>

## Conclusion

The table component that we built here is available on [GitHub](https://github.com/ghoshnirmalya/build-components-using-tailwind). 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/) 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/403rye2ptzx994uhktk1.png)

[LogRocket](https://logrocket.com/signup/) 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.](https://logrocket.com/signup/)
* * *

The post [Building a table component with Tailwind CSS](https://blog.logrocket.com/building-a-table-component-with-tailwind-css/) appeared first on [LogRocket Blog](https://blog.logrocket.com).