Site of Chris Hildebrand

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";
3 
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.