feat: add tailwindcss

README.md

@@ -11,6 +11,7 @@
 + `eslint`: 检查语法规则和代码风格
 + `commitlint` & `husky`: 检查commit提交的信息
 + `rollup-plugin-visualizer`: 生成 report.html 以帮助分析包内容
++ `tailwindcss`: 以配置好tailwindcss的方式，自动生成样式文件
 
 # Getting Started 
 

package.json

@@ -34,7 +34,8 @@
     "husky": "^7.0.4",
     "lint-staged": "^12.1.2",
     "sass": "^1.44.0",
-    "standard-version": "^9.3.2"
+    "standard-version": "^9.3.2",
+    "tailwindcss": "^3.0.5"
   },
   "lint-staged": {
     "*.{js,jsx,vue}": [

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+  },
+};

src/assets/style/index.scss

@@ -1,10 +1,15 @@
 @import "./variable.scss";
 @import "./mixin.scss";
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
 * {
   box-sizing: border-box;
   :focus{
-    outline: none;
+    @apply outline-none;
   }
 }
 .icon {

src/views/Sign.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="sign">
     <div class="sign-content">
-      <div class="sign-title">
+      <div class="sign-title text-gray-800">
         vite-element-template
       </div>
       <el-form :hide-required-asterisk="true" label-position="left" class="sign-form" ref="form" :model="user" label-width="70px">

tailwind.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};