Kombiner Vue.js med PostCSS og Tailwind CSS

Her kommer et helt grunnleggende tips til hvordan man kan bruke Tailwind CSS i Vue.js. Merk er det er flere veier til målet og dette tipset er et av dem. Forutsetninger er at du allerede har Node.js, NPM og Vue CLI.

Du kan også laste ned ferdig kode fra Github som er basert på stegene under.

Steg 1: Lag nytt Vue-prosjekt

vue create [navn-på-prosjekt]

Steg 2: Installer Tailwind CSS

npm install tailwindcss --save-dev

Steg 3: Opprett en konfugurasjonsfil for Tailwind CSS

./node_modules/.bin/tailwind init tailwind.js

Steg 4: Kopier grunnleggende Tailwind CSS

Kopier inn de tre grunnleggende stegene fra Tailwind CSS inn i din egen CSS-fil. Her har jeg gjengitt de tre linjene nedenfor, men ta gjerne en titt på komplett eksempel med forklarende kommentarer.

[@tailwind](http://twitter.com/tailwind) preflight;
[@tailwind](http://twitter.com/tailwind) components;
[@tailwind](http://twitter.com/tailwind) utilities;

Steg 5: Legg til lokal CSS i Vue-fila

Åpne hoved APP-fila og importer CSS-fila di.

import './path/main.css';

Steg 6: Legg til Tailwind CSS som plugins for PostCSS

Legg til konfigurasjon for Tailwind CSS i package.json for PostCSS. Merk det er flere måter å gjøre dette på. Se dokumentasjonen for flere eksempler.

“postcss”: {
 “plugins”: {
 “tailwindcss”: “./tailwind.js”,
 “autoprefixer”: {}
 }
}

Merk, oppsettet nevnt over er testet med følgende versjoner: Vue.js: 3.2.3 Tailwind CSS: 0.7.3

Jeg er Helge Johnsen, frontend-utvikler og en “internettmann”. Besøk meg gjerne på helgejohnsen.no og følge meg på Twitter @sjsd