Posts

Showing posts from March, 2020

Tailwind + Vue

Image
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.
npmi --save-devtailwindcss
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
npxtailwindcssinit
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:

constautoprefixer = require('autoprefixer')
consttailwindcss = require('tailwindcss')
module.exports = {
plugins: [tailwindcss,autoprefixer  ]
}
At this point, Tailwind is…