How to specify exactly 600px width in Tailwind CSS ?
Last Updated :
26 Apr, 2023
Tailwind CSS is a utility-first CSS framework that makes designing websites faster and more efficient. It offers a wide range of pre-defined CSS classes that can be used to apply styles to HTML elements without having to write custom CSS. When designing a website or application, it’s often important to specify exact dimensions for certain elements.
In Tailwind CSS, you can use the w-[size] class to specify a width. However, if you need an exact width that is not one of the predefined values, you can define a custom width value in your tailwind.config.js file, and then use the generated utility class in your HTML markup.
Approach 1: Using the w-[size] Class: In Tailwind CSS, you can use the w-[size] utility class to set the width of an element to a specific pixel value. For example, to set the width of an element to 600 pixels, you can use the w-[600px] class.
Example: In this example, the w-[600px] class is used to set the width of the <div> element to 600 pixels. The text “This element has a width of 600 pixels.” will be displayed inside the element, which 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" />
<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:
Approach 2: 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: In this example, we have used the w-600 class to set the width of the <div> element to 600 pixels. The text “This element has a width of 600 pixels.” will be displayed inside the element, which 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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...