Tachyons Layout Debugging

Last Updated : 19 Aug, 2022

Tachyons is a toolkit that is used to create a responsive website. In this article, we will learn how to define any layout using the Tachyons toolkit.

Every website is divided into various parts like a header, menus, content, and a footer. Tachyons Layout is used to define those sub-parts of a website.

Layout Debugging: These classes are used to help debug layout issues you might be having.

Classes Used:

debug: This class is used to highlight the border of the child elements.

Syntax:

<element-name class="class-name">
   ...
</element-name>

Example 1: In the below code, we will make use of the debug class for debugging.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>GFG</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> 
  
    <style> 
        body { 
            text-align: center; 
            margin: 20px; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="debug"> 
        <h1> GeeksforGeeks</h1> 
    </div> 
      
    <h3> A computer science portal for geeks</h3> 
</body> 
</html> 

Output:

Example 2: In the below code, we will make use of the debug class for debugging.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>GFG</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> 
  
    <style> 
        body { 
            text-align: center; 
            margin: 20px; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="debug"> 
        <h1> GeeksforGeeks</h1> 
        <h3> A computer science portal for geeks</h3> 
        <span>GfG</span> 
    </div> 
</body> 
</html> 