tachyons

Tachyons is a CSS library that lets you style web pages by adding small, single-purpose class names directly to your HTML elements rather than writing traditional CSS stylesheets. Instead of creating a custom class like "blue-heading" and writing a rule that sets the color, you add a pre-built class like "blue" directly in your HTML. The library covers spacing, typography, colors, layout, and responsive sizing.

The design philosophy behind Tachyons is that each class does exactly one thing. This makes it straightforward to change how something looks without worrying that the change will accidentally break something else on the page. Because the classes are reused across elements rather than duplicated in custom CSS rules, the total amount of CSS the browser has to download stays small. The minified library weighs around 14 kilobytes.

Tachyons is built to work at all screen sizes from mobile upward, and includes 490 color combinations that meet accessibility contrast standards. A debugging utility is included to help identify layout problems during development. The library works with plain HTML and also integrates with frameworks like React, Ember, Angular, and Rails.

Getting started is as simple as adding a single link tag pointing to the CDN version of the file. Teams that want to customize the library can clone the repository and modify the source, then compile their changes with a build command. The project website includes documentation for each class and a library of example components.