Learn TACHYONS with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Tachyons Counter Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Counter</title>
</head>
<body class="pa4 tc bg-light-gray">
    <h2 class="f3 mb4">Counter: <span id="count">0</span></h2>
    <div class="mb3">
        <button id="increment" class="f6 link dim br2 ph3 pv2 mb2 dib white bg-blue">+</button>
        <button id="decrement" class="f6 link dim br2 ph3 pv2 mb2 dib white bg-red">-</button>
        <button id="reset" class="f6 link dim br2 ph3 pv2 mb2 dib white bg-gray">Reset</button>
    </div>
    <button id="theme-btn" class="f6 link dim br2 ph3 pv2 mb2 dib black bg-yellow">Switch Theme</button>

    <script>
        let count = 0;
        let isDark = false;
        const countEl = document.getElementById('count');
        const body = document.body;

        document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
        document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
        document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
        document.getElementById('theme-btn').onclick = () => {
        isDark = !isDark;
        body.classList.toggle('bg-dark-gray', isDark);
        body.classList.toggle('white', isDark);
        body.classList.toggle('bg-light-gray', !isDark);
        body.classList.toggle('black', !isDark);
        };
    </script>
</body>
</html>

Demonstrates a simple counter layout using Tachyons utility classes and minimal JavaScript for interactivity.

Let’s Try →

Tachyons Navbar Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Navbar</title>
</head>
<body class="pa3 bg-light-gray">
    <nav class="flex justify-between items-center">
        <div class="f4 fw7">Logo</div>
        <div>
        <a href="#" class="link dim black mr3">Home</a>
        <a href="#" class="link dim black mr3">About</a>
        <a href="#" class="link dim black">Contact</a>
        </div>
    </nav>
</body>
</html>

Demonstrates a responsive navbar using Tachyons utility classes.

Let’s Try →

Tachyons Card Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Card</title>
</head>
<body class="pa4">
    <div class="ba b--black-10 pa3 shadow-1 mw5 center">
        <h3 class="f4 mb2">Card Title</h3>
        <p class="f6 lh-copy">This is a Tachyons card example.</p>
        <button class="f6 link dim br2 ph3 pv2 dib white bg-blue">Action</button>
    </div>
</body>
</html>

Shows a card layout using Tachyons utility classes.

Let’s Try →

Tachyons Modal Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Modal</title>
    <style>.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); justify-content:center; align-items:center; }
    .modal-content { background:#fff; padding:2rem; border-radius:.5rem; }</style>
</head>
<body class="pa4 tc">
    <button id="open-modal" class="f6 link dim br2 ph3 pv2 dib white bg-blue">Open Modal</button>
    <div id="modal" class="modal flex">
        <div class="modal-content">
        <h3 class="f4">Modal Title</h3>
        <p>This is a Tachyons modal example.</p>
        <button id="close-modal" class="f6 link dim br2 ph3 pv2 dib white bg-red">Close</button>
        </div>
    </div>

    <script>
        document.getElementById('open-modal').onclick = () => document.getElementById('modal').style.display='flex';
        document.getElementById('close-modal').onclick = () => document.getElementById('modal').style.display='none';
    </script>
</body>
</html>

Demonstrates a modal popup using Tachyons classes and JavaScript.

Let’s Try →

Tachyons Tabs Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Tabs</title>
    <style>.tab-content { display:none; } .tab-content.active { display:block; }</style>
</head>
<body class="pa4">
    <div class="flex mb3">
        <button class="f6 link dim br2 ph3 pv2 dib bg-blue white mr2" onclick="showTab(1)">Tab 1</button>
        <button class="f6 link dim br2 ph3 pv2 dib bg-gray white mr2" onclick="showTab(2)">Tab 2</button>
        <button class="f6 link dim br2 ph3 pv2 dib bg-dark-gray white" onclick="showTab(3)">Tab 3</button>
    </div>
    <div id="tab1" class="tab-content active">Content for Tab 1</div>
    <div id="tab2" class="tab-content">Content for Tab 2</div>
    <div id="tab3" class="tab-content">Content for Tab 3</div>

    <script>
        function showTab(n){ document.querySelectorAll('.tab-content').forEach(c=>c.classList.remove('active')); document.getElementById('tab'+n).classList.add('active'); }
    </script>
</body>
</html>

Demonstrates tabbed interface using Tachyons classes.

Let’s Try →

Tachyons Accordion Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Accordion</title>
    <style>.accordion-content{display:none;} .accordion-content.active{display:block;}</style>
</head>
<body class="pa4">
    <div>
        <button class="f6 link dim br2 ph3 pv2 dib bg-blue white mb2" onclick="toggleAccordion(1)">Section 1</button>
        <div id="acc1" class="accordion-content">Content for section 1</div>
        <button class="f6 link dim br2 ph3 pv2 dib bg-gray white mb2" onclick="toggleAccordion(2)">Section 2</button>
        <div id="acc2" class="accordion-content">Content for section 2</div>
    </div>

    <script>
        function toggleAccordion(n){ document.getElementById('acc'+n).classList.toggle('active'); }
    </script>
</body>
</html>

Shows an accordion component using Tachyons classes and JS.

Let’s Try →

Tachyons Slideshow Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Slideshow</title>
    <style>.slide{display:none;}.slide.active{display:block;}</style>
</head>
<body class="pa4 tc">
    <div id="slides">
        <img src="https://via.placeholder.com/600x300" class="slide active" alt="">
        <img src="https://via.placeholder.com/600x300" class="slide" alt="">
        <img src="https://via.placeholder.com/600x300" class="slide" alt="">
    </div>
    <button class="f6 link dim br2 ph3 pv2 dib bg-blue white mt3" onclick="nextSlide()">Next</button>

    <script>
        let current=0;
        function nextSlide(){ const slides=document.querySelectorAll('.slide'); slides[current].classList.remove('active'); current=(current+1)%slides.length; slides[current].classList.add('active'); }
    </script>
</body>
</html>

Shows a simple slideshow using Tachyons classes and JS.

Let’s Try →

Tachyons Tooltip Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Tooltip</title>
    <style>.tooltip{position:relative;display:inline-block;}
    .tooltip .tooltiptext{visibility:hidden;width:120px;background-color:black;color:#fff;text-align:center;padding:5px 0;border-radius:6px;position:absolute;z-index:1;bottom:125%;left:50%;transform:translateX(-50%);}
    .tooltip:hover .tooltiptext{visibility:visible;}</style>
</head>
<body class="pa4 tc">
    <div class="tooltip">
        <button class="f6 link dim br2 ph3 pv2 dib bg-blue white">Hover Me</button>
        <span class="tooltiptext">I am a tooltip</span>
    </div>
</body>
</html>

Demonstrates tooltips using Tachyons classes and JS.

Let’s Try →

Tachyons Progress Bar Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Progress Bar</title>
    <style>.progress-bar{height:20px;background:#blue;width:50%;}</style>
</head>
<body class="pa4">
    <div class="w-100 bg-light-gray pa1">
        <div class="progress-bar"></div>
    </div>
</body>
</html>

Shows a simple progress bar using Tachyons utility classes.

Let’s Try →

Code Sample Descriptions

Tachyons Counter Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Counter</title>
</head>
<body class="pa4 tc bg-light-gray">
    <h2 class="f3 mb4">Counter: <span id="count">0</span></h2>
    <div class="mb3">
        <button id="increment" class="f6 link dim br2 ph3 pv2 mb2 dib white bg-blue">+</button>
        <button id="decrement" class="f6 link dim br2 ph3 pv2 mb2 dib white bg-red">-</button>
        <button id="reset" class="f6 link dim br2 ph3 pv2 mb2 dib white bg-gray">Reset</button>
    </div>
    <button id="theme-btn" class="f6 link dim br2 ph3 pv2 mb2 dib black bg-yellow">Switch Theme</button>

    <script>
        let count = 0;
        let isDark = false;
        const countEl = document.getElementById('count');
        const body = document.body;

        document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
        document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
        document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
        document.getElementById('theme-btn').onclick = () => {
        isDark = !isDark;
        body.classList.toggle('bg-dark-gray', isDark);
        body.classList.toggle('white', isDark);
        body.classList.toggle('bg-light-gray', !isDark);
        body.classList.toggle('black', !isDark);
        };
    </script>
</body>
</html>

Demonstrates a simple counter layout using Tachyons utility classes and minimal JavaScript for interactivity.

Let’s Try →

Tachyons Navbar Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Navbar</title>
</head>
<body class="pa3 bg-light-gray">
    <nav class="flex justify-between items-center">
        <div class="f4 fw7">Logo</div>
        <div>
        <a href="#" class="link dim black mr3">Home</a>
        <a href="#" class="link dim black mr3">About</a>
        <a href="#" class="link dim black">Contact</a>
        </div>
    </nav>
</body>
</html>

Demonstrates a responsive navbar using Tachyons utility classes.

Let’s Try →

Tachyons Card Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Card</title>
</head>
<body class="pa4">
    <div class="ba b--black-10 pa3 shadow-1 mw5 center">
        <h3 class="f4 mb2">Card Title</h3>
        <p class="f6 lh-copy">This is a Tachyons card example.</p>
        <button class="f6 link dim br2 ph3 pv2 dib white bg-blue">Action</button>
    </div>
</body>
</html>

Shows a card layout using Tachyons utility classes.

Let’s Try →

Tachyons Modal Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Modal</title>
    <style>.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); justify-content:center; align-items:center; }
    .modal-content { background:#fff; padding:2rem; border-radius:.5rem; }</style>
</head>
<body class="pa4 tc">
    <button id="open-modal" class="f6 link dim br2 ph3 pv2 dib white bg-blue">Open Modal</button>
    <div id="modal" class="modal flex">
        <div class="modal-content">
        <h3 class="f4">Modal Title</h3>
        <p>This is a Tachyons modal example.</p>
        <button id="close-modal" class="f6 link dim br2 ph3 pv2 dib white bg-red">Close</button>
        </div>
    </div>

    <script>
        document.getElementById('open-modal').onclick = () => document.getElementById('modal').style.display='flex';
        document.getElementById('close-modal').onclick = () => document.getElementById('modal').style.display='none';
    </script>
</body>
</html>

Demonstrates a modal popup using Tachyons classes and JavaScript.

Let’s Try →

Tachyons Tabs Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Tabs</title>
    <style>.tab-content { display:none; } .tab-content.active { display:block; }</style>
</head>
<body class="pa4">
    <div class="flex mb3">
        <button class="f6 link dim br2 ph3 pv2 dib bg-blue white mr2" onclick="showTab(1)">Tab 1</button>
        <button class="f6 link dim br2 ph3 pv2 dib bg-gray white mr2" onclick="showTab(2)">Tab 2</button>
        <button class="f6 link dim br2 ph3 pv2 dib bg-dark-gray white" onclick="showTab(3)">Tab 3</button>
    </div>
    <div id="tab1" class="tab-content active">Content for Tab 1</div>
    <div id="tab2" class="tab-content">Content for Tab 2</div>
    <div id="tab3" class="tab-content">Content for Tab 3</div>

    <script>
        function showTab(n){ document.querySelectorAll('.tab-content').forEach(c=>c.classList.remove('active')); document.getElementById('tab'+n).classList.add('active'); }
    </script>
</body>
</html>

Demonstrates tabbed interface using Tachyons classes.

Let’s Try →

Tachyons Accordion Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Accordion</title>
    <style>.accordion-content{display:none;} .accordion-content.active{display:block;}</style>
</head>
<body class="pa4">
    <div>
        <button class="f6 link dim br2 ph3 pv2 dib bg-blue white mb2" onclick="toggleAccordion(1)">Section 1</button>
        <div id="acc1" class="accordion-content">Content for section 1</div>
        <button class="f6 link dim br2 ph3 pv2 dib bg-gray white mb2" onclick="toggleAccordion(2)">Section 2</button>
        <div id="acc2" class="accordion-content">Content for section 2</div>
    </div>

    <script>
        function toggleAccordion(n){ document.getElementById('acc'+n).classList.toggle('active'); }
    </script>
</body>
</html>

Shows an accordion component using Tachyons classes and JS.

Let’s Try →

Tachyons Slideshow Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Slideshow</title>
    <style>.slide{display:none;}.slide.active{display:block;}</style>
</head>
<body class="pa4 tc">
    <div id="slides">
        <img src="https://via.placeholder.com/600x300" class="slide active" alt="">
        <img src="https://via.placeholder.com/600x300" class="slide" alt="">
        <img src="https://via.placeholder.com/600x300" class="slide" alt="">
    </div>
    <button class="f6 link dim br2 ph3 pv2 dib bg-blue white mt3" onclick="nextSlide()">Next</button>

    <script>
        let current=0;
        function nextSlide(){ const slides=document.querySelectorAll('.slide'); slides[current].classList.remove('active'); current=(current+1)%slides.length; slides[current].classList.add('active'); }
    </script>
</body>
</html>

Shows a simple slideshow using Tachyons classes and JS.

Let’s Try →

Tachyons Tooltip Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Tooltip</title>
    <style>.tooltip{position:relative;display:inline-block;}
    .tooltip .tooltiptext{visibility:hidden;width:120px;background-color:black;color:#fff;text-align:center;padding:5px 0;border-radius:6px;position:absolute;z-index:1;bottom:125%;left:50%;transform:translateX(-50%);}
    .tooltip:hover .tooltiptext{visibility:visible;}</style>
</head>
<body class="pa4 tc">
    <div class="tooltip">
        <button class="f6 link dim br2 ph3 pv2 dib bg-blue white">Hover Me</button>
        <span class="tooltiptext">I am a tooltip</span>
    </div>
</body>
</html>

Demonstrates tooltips using Tachyons classes and JS.

Let’s Try →

Tachyons Progress Bar Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
    <title>Tachyons Progress Bar</title>
    <style>.progress-bar{height:20px;background:#blue;width:50%;}</style>
</head>
<body class="pa4">
    <div class="w-100 bg-light-gray pa1">
        <div class="progress-bar"></div>
    </div>
</body>
</html>

Shows a simple progress bar using Tachyons utility classes.

Let’s Try →