Setup Vue With Tailwind

Wed, Jan 27, 2021 2-minute read

You are walking in the beautifiul winter sun and suddenly you come up with an idea for a web application you want to build. Where to start? I use VueJS with Tailwind to quickly setup a draft project. This post guides you through this process. I expect you to have node installed and npm as well.

First of all, we want to initialize the VueJS project. Vue offers a CLI tool to do this. We install this using npm install -g @vue/cli. We can then scaffold a new vue project using vue create vue-taiwind-starter.

Now we have a default Vue project, yay! Next up, let’s install TailwindCSS. To install we will install three components via npm install tailwindcss postcss autoprefixer. However, at the time of writing TailwindCSS is not using PostCSS 8 yet, however there is a small extended npm i we can run to enable this by using a specific channel:

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@\^7 autoprefixer@\^9

To configure PostCSS and TailwindCSS we must configure both, add the following files to the root of your project.

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

tailwind.config.js

module.exports = {
  purge: ['./src/**/*.html', './src/**/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

An important and useful line in the tailwind configuraton is that we would like to purge many of the classes of Tailwind. If we only use one class, we only want to bundle the css classes that are actually used in our application to reduce the final bundle size.

Then in your App.vue class, add the following in the <style> section to allow usage of tailwind in the Vue application:

<template>
...
</template>

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
...
</style>