If you want to use Tailwind framework in your Vue project here you can find set up instruction:
1. Fast one
We can set up Tailwind in our project using vue plugin just use npm and run:
vue add @ky-is/tailwind
2. Manually
This option is for every one who want to make it manually, let’s start!
First of all we need to install Tailwind:
npm install tailwindcss
Next, we must create CSS e.g. assets/css/tailwind.css, where we need to add tailwind code.
@tailwind base;
@tailwind components;
@tailwind utilities;
Keep in mind that you shouldn’t do that in your App.vue, this would increase the recompile time!
Next we need to create Tailwind config file:
npx tailwindcss init
If you don’t have a ‘postcss.config.js’ you must create it to the root of your project and add a code from below;
const autoprefixer = require('autoprefixer')
const tailwindcss = require('tailwindcss')
module.exports = {
plugins: [
tailwindcss,
autoprefixer
]
}
Last step – just import line to include the new tailwind.css stylesheet asset.
import Vue from 'vue'
import App from './App.vue'
import './assets/styles/tailwind.css'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
That’s all!
Have a great adventure with Tailwind!