Über die Einbindung von Tachyons in ein Nuxt-Projekt

Als unbedarfter Benutzer von Nuxt.js sind es manchmal auch einfach erscheinende Tätigkeiten, die dann in der Umsetzung länger dauern als gedacht.
Eine solche Tätigkeit war die Implementierung von Tachyons.

Tachyons beschreibt sich selbst als "Css toolkit" und stellt, sobald es in einem Projekt eingebunden ist, globale CSS-Klassen zur Verfügung, mit welchen häufig vorkommende Design-Vorgänge vereinfacht werden sollen. Zwar kann es "klassisches" CSS nicht völlig ersetzen, ein Blick in den Tachyons Style Guide jedoch zeigt vielfache Anwendungsmöglichkeiten.

Da aber, wie erwähnt, die Implementierung in mein Nuxt.js-Projekt länger gebraucht hat, als ich mir gewünscht hätte, will ich hier die, zugegeben, sehr wenigen Schritte ausführen.

Eine Zeile Konfiguration

Nach der Installation von Tachyons (siehe Tachyons Getting Started), durch

          > npm install tachyons@4.12.0
        

muss nur noch der Pfad zum soeben installierten npm-Package in der CSS-Option im Nuxt-Konfigurationsfile angegeben werden.

          // nuxt.config.js

          export default {

            .
            .
            .

            css: ["tachyons/css/tachyons.min.css"],

            .
            .
            .

          }
        

Die Tachyons-CSS-Klassen können jetzt im gesamten Projekt verwendet werden.