Width & Height in Tailwind

Width in css tailwind

In Tailwind CSS, width is a utility class that is used to set the width of an element. It is used in combination with other classes to create responsive designs that adjust to different screen sizes.

Here are some examples of how width can be used in Tailwind:

1. Set a fixed width: To set a fixed width, you can use the w-{size} class, where {size} is a value between 0 and full (or a fraction of the screen width). For example, w-64 sets the width of an element to 16rem, while w-full sets the width to 100%.

2. Set a minimum width: To set a minimum width, you can use the min-w-{size} class, where {size} is a value between 0 and full. For example, min-w-32 sets the minimum width of an element to 8rem.

3. Set a maximum width: To set a maximum width, you can use the max-w-{size} class, where {size} is a value between 0 and full. For example, max-w-md sets the maximum width of an element to 28rem.

4. Set a percentage width: To set a percentage width, you can use the w-{number}% class, where {number} is a value between 0 and 100. For example, w-50% sets the width of an element to 50% of its parent container.

5. Set a responsive width: To set a responsive width, you can use the w-{size}@{screen} class, where {size} and {screen} are values for size and screen size respectively. For example, w-full md:w-1/2 sets the width of an element to 100% on small screens and 50% on medium screens and above.

6. w-screen will set entire viewport

7. w-full will be 100% of the parent container

same applies to height