tailwindcss & vue 的初体验

一、初始化一个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>

八、结果