Implementing Tachyons in a Nuxt.js project

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 it's 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 (see Tachyons' Getting Started page)

          > 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.