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. Show
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?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 CSSTo 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 Next, let’s initialize our project with npm: npm init -y This command creates a Installing Tailwind CSSWe can install Tailwind from npm: # Using npm npm install tailwindcss # Using Yarn yarn add tailwindcss This adds Adding Tailwind to our project dependenciesNext, 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 Next, we must use the // 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 More great articles from LogRocket:
// tailwind.config.js module.exports = { theme: { extend: {}, }, variants: {}, plugins: [], } Processing the CSSNext, 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 We’ll compile our styles only during development; while deploying to
production, we’ll ship our compiled styles. As a result, we need We must also create a // postcss.config.js module.exports = { plugins: [require("tailwindcss")] }; Next, we need to add a script in our // package.json "scripts": { "tailwind:watch": "postcss styles.css -o tailwind.css" }, This script compiles the styles present in the 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 componentNow, 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 bordersAdding table borders with Tailwind CSS border-separateCurrently, 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. Now, we can force each cell in the table to have its own borders. To do that, we use the Tailwind CSS property So, let’s add <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 Adding border-collapse to our table component in Tailwind CSSNow inversely, we can make the cells of our table component share a common
border with their adjacent cells with So, let’s add <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 ConclusionThe 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 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 and mobile apps — Start monitoring for free. |