Kombiner Vue.js med PostCSS og Tailwind CSS

Laster inn bilde
En grunnleggende innføring Tailwind CSS i Vue.js-prosjekt

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

Dette innlegget er eldre enn 1 år. Hele eller deler av innholdet kan være utdatert eller ikke aktuelt lengre.

Helge Johnsen

Dette er mitt private nettsted. Jeg jobber til daglig som seniorkonsulent i et Norsk IT-selskap. I denne bloggen skriver jeg om store og små ting som rører seg i min private verden. Bloggen består stort sett av tips, egne prosjekter og tanker. Les mer om meg her.

Har du noen tanker eller kommentarer om dette blogginnlegget så finner du meg på en rekke sosiale medier.