Vue CLI 3 With Tailwind

I have been happily using Vue.js for some time now, and a bit more recently Tailwind CSS. Although there were likely some webpack weirdness to get them working the first time, it was painless enough that I no longer remember the process. However, I recently felt like spinning up something new with the shiny Vue CLI, but was a bit worried on how the integration would work.

After not immediately finding anything in the docs, I went to google, and quickly found this article. Although it got me most of the way there, it left off a few key things I needed to be fully integrated. I'll list all the steps, but essentially it skipped actually installing Tailwind (I assume because that seemed obvious) and didn't set the config to use the tailwind.js file created (which leads me to believe Tailwind has a fall back default, but I didn't verify that).

Complete Steps
These steps assume vue cli is already installed and that each step is run from a terminal unless otherwise noted.
Create and enter project
  • vue create my_project
  • cd my_project
Install Tailwind
  • yarn add tailwindcss --dev
Create Tailwind config
The name and location of this file doesn't matter, as we'll explicitly point to it later.
  • ./node_modules/.bin/tailwind init src/tailwind.js
Create a css file using Tailwind directives
I typically just start with exactly the file contents listed here. If you do that, don't run the second command in this section.
  • touch src/assets/main.css
  • printf '@tailwind preflight;\n@tailwind components;\n@tailwind utilities;' > src/assets/main.css
Update package.json
One of the big changes (for me, anyway) with cli 3 is that most config lives in the package.json file directly. When I started a project, there was already a top level section for 'postcss' in package.json. I updated it to add tailwind, and to point at the tailwind.js config file created earlier. The postcss section of my package.json file is now:
1 "postcss": {
2 "plugins": {
3 "tailwindcss": "./src/tailwind.js",
4 "autoprefixer": {}
5 }
6 },
Add reference to css file
Finally, add a reference to the css file. Given the default structure, I added the import to the App.vue file, which meant also adding a script section in the first place. The script section in src/App.vue became:
1 <script>
2 import "./assets/main.css";
4 export default {};
5 </script>

At this point I was able to run yarn server, and observe everything was working by adding a bg-white to an element then changing the color value in the tailwind.js config file.