Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Tabs Example - Tachyons Typing CST Test
Tabs Example — Tachyons Code
Demonstrates tabbed interface using Tachyons classes.
<!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>Tachyons Language Guide
Tachyons is a functional CSS framework that emphasizes small, reusable utility classes to build fast, responsive, and highly maintainable user interfaces.
Primary Use Cases
- ▸Highly optimized and lightweight web pages
- ▸Performance-focused websites
- ▸Rapid prototyping using utility classes
- ▸Responsive design projects without heavy JS
- ▸Custom UI design without prebuilt components
Notable Features
- ▸Atomic/utility-first CSS approach
- ▸Responsive helpers for mobile-first design
- ▸Lightweight and fast-loading
- ▸Composable classes for flexible layouts
- ▸No JS components included
Origin & Creator
Created by Adam Morse in 2013 as a minimalist and performance-focused CSS framework.
Industrial Note
Tachyons is popular in projects prioritizing speed, maintainability, and functional CSS over component-heavy frameworks.
Quick Explain
- ▸Tachyons uses atomic CSS classes for styling instead of prebuilt components.
- ▸It provides utilities for spacing, typography, color, layout, and responsiveness.
- ▸The framework encourages a functional, composable approach to UI development.
Core Features
- ▸Small, reusable CSS classes
- ▸Functional approach to styling
- ▸Typography, spacing, color, and layout utilities
- ▸Responsive class modifiers for different breakpoints
- ▸Minimal footprint for fast loading
Learning Path
- ▸Understand atomic CSS principles
- ▸Learn core utility classes for spacing, typography, colors
- ▸Master responsive modifiers
- ▸Practice composing multiple classes
- ▸Integrate Tachyons with JS frameworks if needed
Practical Examples
- ▸Responsive header and navigation
- ▸Card layout using flex utilities
- ▸Forms with spacing and typography utilities
- ▸Image gallery with width and spacing classes
- ▸Buttons composed of multiple atomic classes
Comparisons
- ▸Utility-first CSS vs component-heavy frameworks (Bootstrap, UIkit)
- ▸No JS vs UIkit’s or Materialize’s JS plugins
- ▸Smaller footprint and faster load
- ▸Steeper learning curve initially
- ▸Encourages maintainable, composable HTML structure
Strengths
- ▸Extremely lightweight and performant
- ▸Highly composable and maintainable
- ▸Easy to understand and read once familiar
- ▸Encourages separation of concerns in styling
- ▸Mobile-first responsive design built-in
Limitations
- ▸No prebuilt components; purely utility classes
- ▸Steeper learning curve for beginners
- ▸Requires discipline in composing classes
- ▸Not ideal for quick prototyping with standard components
- ▸Can result in long class names in HTML
When NOT to Use
- ▸If prebuilt components are required
- ▸For projects needing heavy JS interactivity
- ▸For teams unfamiliar with functional CSS
- ▸When quick prototyping with standard components is desired
- ▸When long class lists in HTML are a concern
Cheat Sheet
- ▸`pa3` - padding all sides
- ▸`ma2` - margin all sides
- ▸`f3` - font size
- ▸`bg-light-gray` - background color
- ▸`w-50-m` - width 50% on medium screens
FAQ
- ▸Is Tachyons free?
- ▸Yes - open-source under MIT license.
- ▸Does Tachyons include JS?
- ▸No - purely CSS framework.
- ▸Is Tachyons responsive?
- ▸Yes - mobile-first responsive utilities.
- ▸Can I customize Tachyons?
- ▸Yes - via Sass or custom CSS overrides.
- ▸Which browsers does Tachyons support?
- ▸All modern browsers with Flexbox support.
30-Day Skill Plan
- ▸Week 1: Basic layout and spacing utilities
- ▸Week 2: Typography and color classes
- ▸Week 3: Responsive design using modifiers
- ▸Week 4: Compose complex UI without custom CSS
- ▸Week 5: Optimize and scale large projects with modular utilities
Final Summary
- ▸Tachyons is a utility-first CSS framework.
- ▸Highly lightweight and performance-oriented.
- ▸Mobile-first, responsive, and composable.
- ▸No JS components included; purely CSS.
- ▸Ideal for maintainable, scalable, and fast-loading UIs.
Project Structure
- ▸index.html - main layout
- ▸assets/css/ - optional custom overrides
- ▸node_modules/tachyons - installed framework
- ▸partials/ - reusable sections
- ▸No JS folder needed
Monetization
- ▸Develop templates using Tachyons for sale
- ▸Performance-optimized landing pages
- ▸Custom SPAs and dashboards
- ▸Rapid prototyping services
- ▸Consulting on atomic CSS design
Productivity Tips
- ▸Compose classes rather than creating custom CSS
- ▸Use responsive modifiers early
- ▸Keep class lists organized
- ▸Leverage utility-first philosophy for fast development
- ▸Integrate with frameworks for dynamic projects
Basic Concepts
- ▸Atomic classes for spacing (`pa3`, `ma2`), typography (`f1`, `lh-copy`), and colors (`bg-blue`, `white`)
- ▸Grid and layout utilities (`flex`, `flex-wrap`, `w-50`) for responsive design
- ▸Responsive suffixes like `-ns`, `-m`, `-l` for different screen sizes
- ▸Utility-first approach encourages composable and maintainable HTML
- ▸Minimal reliance on custom CSS