Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Specify Exactly 600px Width in Tailwind CSS
In Tailwind CSS, developers sometimes need to use specific styles that aren't available in the default utility classes. A common need is to set an exact width of 600 pixels for an element. This article will guide us in specifying exactly 600px width in Tailwind CSS.
Approaches
600px width can be specified using the following approaches:
Using The W-[size] Class
This is the simplest way to specify a fixed width like 600px in tailwind CSS. The latest versions of Tailwind CSS support the usage of Arbitary Value. We can do this by specifying the desired width value inside square brackets, such as w-[600px].
Syntax
<div class="w-[600px]"> Your content here </div>
Example Code
This example demonstrates the usage of the arbitrary value by specifying the width of the div to 600px.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
<title>600px Width Example</title>
</head>
<body class="p-10">
<div class="w-[600px] bg-blue-500
p-4 text-white rounded-lg">
This div has a width of exactly 600px.
</div>
</body>
</html>
Output
Using Tailwind.config.js
Another way of specifying exactly 600px width is by extending the theme to include your custom width in the 'tailwind.config.js' file. Follow the steps mentioned below to do the same:
- Open your 'tailwind.config.js' file.
- In the 'theme.extend' section of the 'tailwind.config.js' file, specify the width values to 600px. This allows you to create custom utility classes for exactly 600px width.
module.exports = {
theme: {
extend: {
width: {
'600': '600px', // Add your custom width here
},
},
},
}
Example Code
This example demonstrates the creation of a custom utility class for specifying the width of the div to 600px.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
<title>600px Width Example</title>
</head>
<body class="p-10">
<div class="w-600 bg-blue-500
p-4 text-white rounded-lg">
This div has a width of exactly 600px.
</div>
</body>
</html>
Output
112 Views
