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.
If you liked this post, please, do share it:
Thanks, for reading (and sharing)! 🥳