OverVue.dev

# Tailwind CSS

# Intall Tailwind on an existing Vue Project

# Install Tailwind via npm

npm install tailwindcss

  
        Copied!
1

# Add a css Tailwind CSS file

Create the file

touch src/assets/tailwind.css

  
        Copied!
1
# Input - Add this content to the file :
 
 
 

@tailwind base;
@tailwind components;
@tailwind utilities;

  
        Copied!
1
2
3
# Input - Add the following lines to main.js


 
 







import Vue from "vue"
import App from "./App.vue"
import VueTailwind from "vue-tailwind"
Vue.use(VueTailwind)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount("#app")

  
        Copied!
1
2
3
4
5
6
7
8
9
10

# Create your Tailwind config file

Run the following command to create a tailwind.config.js file.

npx tailwindcss init

  
        Copied!
1

# Process your CSS with Tailwind (coming soon)

See the official Tailwind CSS doc

← VsCode →