Tachyons Layout Max Widths

Last Updated : 08 Jun, 2022

Tachyons is used to define the maximum width of the element. In simple words, if the content is larger than the maximum width, it will automatically change the height of the element.

Syntax:

<div class ="mw3">...</div>

Tachyons Layout Max Widths Class:

“mw” class: It is used to define the maximum width of the element.

Modifiers offered by Tachyons toolkit: This modifier is used to change the width scale between 1 to 9.

Media Query Extensions:

not-small(-ns): This media query extension is used to display content when the size of the screen is small.
medium(-m): This media query extension is used to display content when the size of the screen is medium.
large(-l): This media query extension is used to display content when the size of the screen is large.

Example 1: In the below example we will use the basic “mw” class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          href= 
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> 
    <style> 
        body { 
            text-align: center; 
        } 
        h1 { 
            color: green; 
  
        } 
        div { 
            border: 2px solid black; 
            background-color: lightgreen; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>A computer science portal for geeks</h3> 
  
    <div class="mw3">GFG</div><br> 
    <div class="mw4">GFG</div><br> 
</body> 
  
</html>

Output:

Example 2: In the below example we will use the basic “mw” class.

HTML

<!DOCTYPE html> 
<html> 
<head>     
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/> 
  
    <style> 
        body{ 
            text-align:center; 
        } 
        h1{ 
            color:green; 
              
        } 
        div{ 
            border:2px solid black; 
            background-color:lightgreen; 
            margin-left:280px; 
        } 
    </style> 
</head> 
      
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>A computer science portal for geeks</h3><br> 
    <h4>Programming Language</h4> 
      
    <div class ="mw4"> 
      Programming Language is indeed the fundamental unit of today’s 
      tech world. It is considered as the set of commands and instructions 
      that we give to the machines to perform a particular task. 
    </div> 
    <br> 
    <div class ="mw6"> 
      Programming Language is indeed the fundamental unit of today’s  
      tech world. It is considered as the set of commands and instructions 
      that we give to the machines to perform a particular task.  
    </div> 
</body> 
</html>