Creating a fresh Vuejs 3 project that uses tailwind css and postcss 8


I had previous complained written about my difficulties when trying to add tailwind css to a fresh vuejs starter project. I wasn’t satisfied with the end-result, so I tried again today. And again, it took me ours of searching, and only finding unhelpful answers of people who seemingly just copy & paste commands until something works? Is this what frontend development will be like for me?

Anyway, I finally managed to reliably create an empty vue3 project that uses the most recent version of tailwind.

Prerequisites

$ npm --version
8.1.1

$ npm list
/Users/.../cool-new-vue-project
└── (empty)

$ npm dist-tag ls @vue/cli
latest: 4.5.15
next: 5.0.0-beta.7

The crucial thing to notice is that 4.5.15 does still use postcss7, which will create the problems I had described in an earlier post. However, 5.0.0.-beta.7 does use postcss8, so that is what we will be using.

Installation

We will use the the next version-tag to get the most recent one:

$ npm install -D @vue/cli@next

Create the project in the current directory:

$ vue create .
Vue CLI v5.0.0-beta.7
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features 


Make sure to pick Vue 3 here. If you get a “command not found” at this point, try node_modules/.bin/vue create . instead.

Install tailwind css:

$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
...
$ npx tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

Verify that it’s working

$ npm run serve

should run without any errors.

You should now proceed to add tailwind’s css as per their documentation.


See also