How to Code Pixel Perfect Design using Tailwind CSS ?

Last Updated : 05 Jun, 2023

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: