In this episode, we walk through how to add Tailwind CSS to a brand new Vue CLI project. Starting off, you'll see how to spin up a new Vue app (assuming you've got Vue CLI installed), and then we jump right into installing Tailwind CSS as a project dependency.
We set up PostCSS so that Tailwind can be properly built into our app's styles, and you'll see how to create a simple PostCSS config file with the necessary plugins. After making sure nothing's broken, we organize our project files, create a new CSS file, and pull in Tailwind's base, components, and utilities with the appropriate directives.
Once everything's set up, we show two different ways to include your Tailwind CSS file in the project: importing it in main.js
, or adding it directly in your App.vue
's style tag. Both approaches work, and you'll get to decide which fits best in your setup. By the end, we test it out by adding a Tailwind class in your template and confirm it's working. That’s it—Tailwind is now fully set up and ready to use in your Vue project!