How to Code Pixel Perfect Design using Tailwind CSS ?
Last Updated :
28 Apr, 2025
Pixel-perfect design refers to the ability to create designs that are accurate down to the pixel level. Tailwind CSS is a popular utility-first CSS framework that can help developers to create pixel-perfect designs quickly and efficiently. In this article, we'll discuss how to code pixel-perfect designs using Tailwind CSS.
Approaches: There are two approaches to creating pixel-perfect designs using Tailwind CSS. The first approach is to use arbitrary values, while the second approach is to create custom utilities.
- Using arbitrary values: Tailwind CSS allows us to use arbitrary values for properties like width, height, and font-size. We can use these values to achieve pixel-perfect designs without creating custom utilities.
Syntax:
<!-- Specify custom width in pixels -->
<div class="w-[250px]"> ... </div>
<!-- Specify custom value in percetage -->
<div class="w-[30%]"> ... </div>
- Using custom utilities: Tailwind CSS also allows us to create custom utilities to achieve pixel-perfect designs. We can create our own custom utility classes for Tailwind’s utility layer in the stylesheet.
Syntax:
@layer utilities {
.h-100 {
height: 100px;
}
}
Steps to create a new Tailwind CSS project:
Step 1: To get started, let's create a new project directory and navigate into it using the following commands in your terminal:
mkdir tailwind-app
cd tailwind-app
Step 2: Next, let's initialize a new Node.js project using the following command:
npm init -y
Step 3: Install Tailwind CSS
Once we have created our new project, we need to install Tailwind CSS and create a configuration file tailwind.config.js using the following command:
npm i tailwindcss postcss autoprefixer
npx tailwindcss init
Step 4: Configure your template paths
To configure, we need to add the paths to all of your template files in the tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Step 5: Create files for HTML & stylesheet
Create a new public directory in the root of our project directory. In the public directory create new files styles.css and tailwind.css.
In tailwind.css add the @tailwind directives for each of Tailwind’s layers:
@tailwind base;
@tailwind components;
@tailwind utilities;
Project structure: The following project structure will be generated, after completing the above-mentioned steps:
Example 1: This example describes the code pixel-perfect designs using arbitrary values in Tailwind CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet"
href="./styles.css">
<title>Tailwind App</title>
</head>
<body class="flex flex-col
justify-center
items-center">
<div class="bg-green-600 w-[250px]">
<h1 class="text-white
text-3xl text-center">
GeeksforGeeks
</h1>
</div>
</body>
</html>
Explanation: In the above HTML code, the div element has an arbitrary value of w-[250px] for its class. The w in w-[250px] refers to the width property of the element, while the square brackets [] indicate that it's a dynamic value.
The value 250px inside the square brackets is the custom width value which sets the width of the div element to an exact value of 250px, which may not be available through the standard Tailwind CSS utility classes (w-60 (240px) and w-64 (256px) being nearest). This demonstrates the flexibility and customization options offered by Tailwind CSS, allowing us to create unique designs using arbitrary values for HTML elements.
Start the Tailwind CLI build process: Now run the CLI tool for scanning our template files for classes and build our CSS:
npx tailwindcss -i public/tailwind.css -o public/styles.css --watch
Output:
Using arbitrary values
Example 2: This example describes the code pixel-perfect designs using custom utilities.
Tailwind CSS also allows you to add your own custom utilities to the framework. The nearest Tailwind CSS utility classes for providing border-width to "3px" are only border-2(2px) and border-4(4px). The process of adding custom utilities is straightforward - you can simply add them to your CSS file.
CSS
/* tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.border-3 {
border-width: 3px;
}
}
By using the @layer directive in your CSS, you can instruct Tailwind to automatically place your custom utilities alongside the standard @tailwind utilities. Any unused custom utilities will be removed from the final CSS file, helping to reduce the overall file size and improve the performance of your website.
In index.html you can set the height as follows:
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet"
href="./styles.css">
<title>Tailwind App</title>
</head>
<body class="flex flex-row justify-center
items-center gap-4">
<div class="w-60 h-20 border-2 border-sky-400">
<h1 class="text-green-500
text-3xl
text-center">
GeeksforGeeks
</h1>
</div>
<div class="w-60 h-20 border-3 border-sky-400">
<h1 class="text-green-500
text-3xl text-center">
GeeksforGeeks
</h1>
</div>
<div class="w-60 h-20 border-4 border-sky-400">
<h1 class="text-green-500
text-3xl text-center">
GeeksforGeeks
</h1>
</div>
</body>
</html>
The 2nd div element has the value border-3 for its class, which refers to the border-width property of the element defined using the @layer directive in tailwind.css file. If there's a particular CSS feature that you wish to implement in your project but Tailwind CSS does not provide any built-in utilities for it, adding custom utilities can be a useful solution.
Output:
Using custom utilities
Similar Reads
How to Create Multiple Themes using Tailwind CSS ? In this article, we will discuss how to create multiple themes using Tailwind CSS. Tailwind CSS is a popular utility-first CSS framework that provides a lot of pre-designed CSS classes for designing websites. With Tailwind CSS, you can easily create multiple themes for your website. This means that
3 min read
How to apply background image with linear gradient using Tailwind CSS ? In this article, we will see how to apply background images with a linear gradient using Tailwind CSS. Tailwind CSS is a highly customizable, utility-first CSS framework from which we can use utility classes to build any design. To apply background images with linear gradients we use the background
2 min read
How to set auto height on grid item using Tailwind ? Our task is to create a grid container with the height of the grid items set to "auto". Tailwind CSS includes the grid and grid-cols-number classes, which allow us to easily create a grid. Approach: We will use the CDN link of Tailwind CSS and create a basic HTML page, We will create a container box
4 min read
How to use calc() in Tailwind CSS? The calc() function in CSS allows you to perform calculations for property values dynamically. While Tailwind CSS doesn’t directly support calc(), you can use it inline or with custom utilities.1. Using Inline StylesYou can use calc() directly within the style attribute for dynamic property values.H
2 min read
How to set a background color to full page using Tailwind CSS ? Setting a full-page background color using Tailwind CSS means styling the entire viewport with a consistent background, regardless of content size. This is achieved by using classes like h-screen to cover the full height and bg-color or gradient classes to apply the desired color.Here are some commo
2 min read
How to use Tailwind CSS with esbuild ? Tailwind CSS is a utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. An esbuild is a bundler for the web project that brings the build tool for performance enhancement, along with fa
2 min read