How to use tailwind.config.js In CSS
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:
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.
<!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">
w3wiki
</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.
How to specify exactly 600px width in Tailwind CSS ?
In Tailwind CSS, to specify an exact width, use utility classes like w-1/2 for half-width, w-64 for fixed width (16rem), or custom values with w-[value]. To set an element’s width to exactly 600px, use the custom utility class w-[600px]. This class applies a fixed width of 600 pixels to the element, providing precise control over its size in your layout.
Here we have some approaches to specify exactly 600px width in Tailwind CSS:
Table of Content
- Using the w-[size] Class
- Using tailwind.config.js