Open In App

Tachyons Theming

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to apply themes using the Tachyons toolkit. Tachyons is a CSS toolkit which is used to create a responsive website. Theming is the ability to style various elements of our website differently depending on the context, while still maintaining visual appeal. 

Categories offered by themes are listed below:

  • Skins: This is used to set the colour of the text and the colour of the background.
  • Skins Animation: This is used to set the colour from the _colors.css file to style text and background colours for hover and focus states.
  • Hovers: This is used to provide a hover effect you place a cursor over any element.
  • Background-size: This is used to set the size of the background.
  • Border: This is used to provide a border to an element. 
  • Border Radius: This is used to provide the rounded border style to the element.
  • Box Shadow: This is used to provide the shadow effect to the element.
  • Opacity: This is used to provide the opacity effect to an element.

Syntax:

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

Example 1: In this example, we will use skin theming that is used to set the colour of the text and the colour of the background.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
  
    <style>
        body {
            text-align: center;
            margin: 10px;
        }
    </style>
</head>
  
<body>
    <h1 class="green">GeeksforGeeks</h1>
    <h3 class="bg-green">
        A computer science portal for geeks
    </h3>
</body>
  
</html>


Output:

 

Example 2: In this example, we will use border theming that is used to provide a border to an element.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
  
    <style>
        body {
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
  
<body>
    <h1 class="green">GeeksforGeeks</h1>
    <h3 class="bg-green ba">
        A computer science portal for geeks
    </h3>
</body>
  
</html>


Output:

 

Reference: http://tachyons.io/docs/#theming



Last Updated : 08 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads