How to Specify Exactly 600px Width in Tailwind CSS?

Last Updated : 14 Oct, 2024

Specifying exactly 600px width in Tailwind CSS means using the utility class `w-[600px]`. This custom class allows you to set a fixed width of 600 pixels for an element, overriding default width utilities and providing precise control over element size.

Below are the approaches to specify exactly 600px width in Tailwind CSS:

Table of Content

Using the w-[size] Class
Using tailwind.config.js

Using the w-[size] Class

The w-[size] class in Tailwind CSS allows developers to specify custom widths by defining the exact size within square brackets, such as w-[600px]. This approach provides flexibility beyond Tailwind’s predefined width classes, enabling precise control over element width.

Example: In this example, the w-[600px] class sets the <div> element's width to 600 pixels, displaying the text "This element has a width of 600 pixels."

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" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Using the w-[size] Class</title>
</head>

<body>
    <h1 class="text-green-500 text-6xl">
        GeeksforGeeks
    </h1>

    <div class="w-[600px] text-3xl">
        This element has a width of 600 pixels.
    </div>
</body>

</html>

Output:

Using tailwind.config.js

The second approach to set a specific width in Tailwind CSS is to define a new width value in the tailwind.config.js file. This method is useful when you need to define a specific width value that is used in multiple places across your project.

To define a new width value, you can add a new entry to the theme.extend.width object in the tailwind.config.js file. For example, to define a width of 600 pixels, you can add the following code:

JavaScript

module.exports = {
    content: [
        "*"
    ],
    theme: {
        extend: {
            width: {
                '600': '600px',
            },
        },
    },
    plugins: [],
}

In the code above, we have added a new entry to the width object with a key of 600 and a value of 600px. Once you have defined a new width value in the tailwind.config.js file, you can use it as a utility class in your HTML code.

Example: Here The w-600 class sets the <div> element's width to 600 pixels, containing the text "This element has a width of 600 pixels.

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="main.css" />
    <title>Using tailwind.config.js</title>
</head>

<body>
    <h1 class="text-green-500 text-6xl">
          GeeksforGeeks
      </h1>
    
      <div class="w-600 text-3xl">
         This element has a width of 600 pixels.
    </div>
</body>

</html>

Output:

By defining a new width value in the tailwind.config.js file, you can reuse it across your project without having to write custom CSS or inline styles. This makes your code more modular and easier to maintain over time.