Tailwind CSS Min-Width
Last Updated :
23 Mar, 2022
This class accepts lots of values in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS min-width property. This class is used to define the minimum width of an element. The value of the width cannot be less than the value of the min-width. If the content specified within the element is smaller, min-width maintains the specified minimum width.
Min-Width Classes:
- min-w-0: This class is used to set the length of min-width.
- min-w-full: This class is used to set the length of min-width at full capacity.
- min-w-min: This class is used to set the length of min-width at minimum capacity.
- min-w-max: This class is used to set the length of min-width at maximum capacity.
Syntax:
<element class="min-w-0">...</element>
Example: The width will change according to the size of the screen.
HTML
<!DOCTYPE html>
< head >
< link href =
rel = "stylesheet" >
</ head >
< body class = "text-center mx-4 space-y-2" >
< h1 class = "text-green-600 text-5xl font-bold" >
GeeksforGeeks
</ h1 >
< b >Tailwind CSS MIn-Width Class</ b >
< div class="w-24 h-16 min-w-full md:min-w-0
bg-green-400 rounded-lg text-white">
</ div >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...