一、初始化一个vue项目(未使用vue 3)
vue create twc
二、安装 tailwindcss 相关依赖
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
三、根目录,创建配置文件,postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
四、根目录,创建配置文件,tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
五、创建 css 文件,根目录,assets/tailwind.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
六、引入css文件,修改 main.js
import Vue from "vue";
// import App from "./App.vue";
import Home from "./components/Home.vue";
import './assets/tailwind.css'
Vue.config.productionTip = false;
new Vue({
render: (h) => h(Home),
}).$mount("#app");
七、使用,新建一个home.vue
<template>
<div class="app">
<h1 class="text-5xl text-center">Home</h1>
</div>
</template>
<script>
export default {
name: "Home",
};
</script>
八、结果