Tailwind + Vue
![Image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht4lHWgXMrPvVdIMxwEKkXWcsOEY91GGAj00XVLm1NzrvdNwl7ZMov_2on5fy8b6Tce8KqP41MC7O8KzP9CXpzay6B6j5ycmSaBCppXFs5iT15mA_MWPAtgeFZhqaBy74Zw3-cvjTwLLo/s320/manuelmejiajr.com+vue+%252B+tailwind.png)
I can't stress enough how happy I am after start using Tailwind CSS in my Vue projects. Now, I don't have to deal directly with CSS; Tailwind will handle that for me 😉. This is a short tutorial on how to add Tailwind CSS to your Vue app created with the Vue CLI. Let's start: 1) Open your project and install Tailwind . npm i -- save - dev tailwindcss 2) Create a CSS file called tailwind.css in the following path src/assets/css/ and add the content below: @tailwind base; @tailwind components; @tailwind utilities; 3) Now import the tailwind.css in main.js import './assets/css/tailwind.css' 4) Create your Tailwind config file by running npx tailwindcss init This will create a minimal tailwind.config.js file at the root of your project. 5) Create a postcss.config.js file at the root of your app and add this: const autoprefixer = require ( 'autoprefixer' ) const tailwindcss = require ( 'tai