Implementing Tachyons in a Nuxt.js project

This is an archived post from 2020, when this blog was about music and web development. My current work focuses on AI agent security and compliance — see the newer posts.

As a new user to Nuxt.js, even the simplest things can take longer than expected. One of these things was the implementation of Tachyons.

Tachyons describes itself as a “CSS toolkit”. After integration into a project, global CSS classes become available which are meant to make common processes of designing easier and more accessible. While it can’t fully replace custom CSS, taking a look into the Style Guide shows many use-cases.

Since its implementation into my Nuxt.js project took longer than I would have wished, I want to present the — admittedly — very simple steps.

One line of configuration

After installing Tachyons:

npm install tachyons@4.12.0

You need to add the path to the npm package to the CSS section of the nuxt config file:

// nuxt.config.js
export default {
  // ...
  css: ["tachyons/css/tachyons.min.css"],
  // ...
}

The Tachyons CSS classes can now be used everywhere in the project.