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.
$ 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.
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)! 🥳