feat(tailwindcss): add tailwindcss

README.md

@@ -8,12 +8,15 @@
 
 - [x] 添加[`ty-ui`](http://120.55.57.35:4874/#/)。
 - [x] `eslint`调整，并配合`prettier`统一格式化代码。
-- [ ] 添加 原子化 CSS 引擎 UnoCSS
-- [ ] 剔除若依改造的样式，并最终形成符合 ui 统一视觉的一个项目模版一个项目模版
+- [x] 添加 原子化 [`tailwindcss`](https://www.tailwindcss.cn/)。
+- [x] 剔除若依改造的样式
 - [ ] 测试`ty-ui`，并增加页面使用案例
+- [ ] 根据 UI 并调整页面整体样式
 
 ## 启动发布
 
+node 版本在`16`，其他版本可能启动不成功
+
 ```bash
 # 安装包，已配置好镜像源，不需要在命令中指定registry
 npm install

package.json

@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
-    "@taiyuan/ty-ui": "^0.0.1",
+    "@taiyuan/ty-ui": "latest",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
@@ -54,6 +54,7 @@
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "tailwindcss": "1.9.6",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
@@ -94,6 +95,7 @@
   },
   "browserslist": [
     "> 1%",
-    "last 2 versions"
+    "last 2 versions",
+    "not ie <= 9"
   ]
-}
+}
\ No newline at end of file

postcss.config.js

+module.exports = {
+  plugins: [require('tailwindcss'), require('autoprefixer')]
+};

src/assets/styles/btn.scss

-@import './variables.scss';
-
-@mixin colorBtn($color) {
-  background: $color;
-
-  &:hover {
-    color: $color;
-
-    &:before,
-    &:after {
-      background: $color;
-    }
-  }
-}
-
-.blue-btn {
-  @include colorBtn($blue);
-}
-
-.light-blue-btn {
-  @include colorBtn($light-blue);
-}
-
-.red-btn {
-  @include colorBtn($red);
-}
-
-.pink-btn {
-  @include colorBtn($pink);
-}
-
-.green-btn {
-  @include colorBtn($green);
-}
-
-.tiffany-btn {
-  @include colorBtn($tiffany);
-}
-
-.yellow-btn {
-  @include colorBtn($yellow);
-}
-
-.pan-btn {
-  font-size: 14px;
-  color: #fff;
-  padding: 14px 36px;
-  border-radius: 8px;
-  border: none;
-  outline: none;
-  transition: 600ms ease all;
-  position: relative;
-  display: inline-block;
-
-  &:hover {
-    background: #fff;
-
-    &:before,
-    &:after {
-      width: 100%;
-      transition: 600ms ease all;
-    }
-  }
-
-  &:before,
-  &:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 2px;
-    width: 0;
-    transition: 400ms ease all;
-  }
-
-  &::after {
-    right: inherit;
-    top: inherit;
-    left: 0;
-    bottom: 0;
-  }
-}
-
-.custom-button {
-  display: inline-block;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  background: #fff;
-  color: #fff;
-  -webkit-appearance: none;
-  text-align: center;
-  box-sizing: border-box;
-  outline: 0;
-  margin: 0;
-  padding: 10px 15px;
-  font-size: 14px;
-  border-radius: 4px;
-}

src/assets/styles/index.scss

 @import './variables.scss';
 @import './mixin.scss';
+
+/* 设置tailwindcss */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import './transition.scss';
 @import './sidebar.scss';
 
+svg,
+img {
+  display: inline;
+}
+img {
+  max-width: initial;
+}
+
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;
@@ -39,19 +53,6 @@ html {
   padding: 4px 0;
 }
 
-a:focus,
-a:active {
-  outline: none;
-}
-
-a,
-a:focus,
-a:hover {
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
-}
-
 div:focus {
   outline: none;
 }

src/assets/styles/ruoyi.scss

-/**
-* 通用css样式布局处理
-* Copyright (c) 2019 ruoyi
-*/
-
-/** 基础通用 **/
-.pt5 {
-  padding-top: 5px;
-}
-
-.pr5 {
-  padding-right: 5px;
-}
-
-.pb5 {
-  padding-bottom: 5px;
-}
-
-.mt5 {
-  margin-top: 5px;
-}
-
-.mr5 {
-  margin-right: 5px;
-}
-
-.mb5 {
-  margin-bottom: 5px;
-}
-
-.mb8 {
-  margin-bottom: 8px;
-}
-
-.ml5 {
-  margin-left: 5px;
-}
-
-.mt10 {
-  margin-top: 10px;
-}
-
-.mr10 {
-  margin-right: 10px;
-}
-
-.mb10 {
-  margin-bottom: 10px;
-}
-.ml10 {
-  margin-left: 10px;
-}
-
-.mt20 {
-  margin-top: 20px;
-}
-
-.mr20 {
-  margin-right: 20px;
-}
-
-.mb20 {
-  margin-bottom: 20px;
-}
-.ml20 {
-  margin-left: 20px;
-}
-
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: inherit;
-  font-weight: 500;
-  line-height: 1.1;
-  color: inherit;
-}
-
-.el-message-box__status + .el-message-box__message {
-  word-break: break-word;
-}
-
-.el-dialog:not(.is-fullscreen) {
-  margin-top: 6vh !important;
-}
-
-.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
-  overflow: auto;
-  overflow-x: hidden;
-  max-height: 70vh;
-  padding: 10px 20px 0;
-}
-
-.el-table {
-  .el-table__header-wrapper,
-  .el-table__fixed-header-wrapper {
-    th {
-      word-break: break-word;
-      background-color: #f8f8f9;
-      color: #515a6e;
-      height: 40px;
-      font-size: 13px;
-    }
-  }
-
-  .el-table__body-wrapper {
-    .el-button [class*='el-icon-'] + span {
-      margin-left: 1px;
-    }
-  }
-}
-
-/** 表单布局 **/
-.form-header {
-  font-size: 15px;
-  color: #6379bb;
-  border-bottom: 1px solid #ddd;
-  margin: 8px 10px 25px 10px;
-  padding-bottom: 5px;
-}
-
-/** 表格布局 **/
-.pagination-container {
-  position: relative;
-  height: 25px;
-  margin-bottom: 10px;
-  margin-top: 15px;
-  padding: 10px 20px !important;
-}
-
-/* tree border */
-.tree-border {
-  margin-top: 5px;
-  border: 1px solid #e5e6e7;
-  background: #ffffff none;
-  border-radius: 4px;
-}
-
-.pagination-container .el-pagination {
-  right: 0;
-  position: absolute;
-}
-
-@media (max-width: 768px) {
-  .pagination-container .el-pagination > .el-pagination__jump {
-    display: none !important;
-  }
-  .pagination-container .el-pagination > .el-pagination__sizes {
-    display: none !important;
-  }
-}
-
-.el-table .fixed-width .el-button--mini {
-  padding-left: 0;
-  padding-right: 0;
-  width: inherit;
-}
-
-/** 表格更多操作下拉样式 */
-.el-table .el-dropdown-link,
-.el-table .el-dropdown-selfdefine {
-  cursor: pointer;
-  margin-left: 5px;
-}
-
-.el-table .el-dropdown,
-.el-icon-arrow-down {
-  font-size: 12px;
-}
-
-.el-tree-node__content > .el-checkbox {
-  margin-right: 8px;
-}
-
-.list-group-striped > .list-group-item {
-  border-left: 0;
-  border-right: 0;
-  border-radius: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.list-group {
-  padding-left: 0px;
-  list-style: none;
-}
-
-.list-group-item {
-  border-bottom: 1px solid #e7eaec;
-  border-top: 1px solid #e7eaec;
-  margin-bottom: -1px;
-  padding: 11px 0px;
-  font-size: 13px;
-}
-
-.pull-right {
-  float: right !important;
-}
-
-.el-card__header {
-  padding: 14px 15px 7px;
-  min-height: 40px;
-}
-
-.el-card__body {
-  padding: 15px 20px 20px 20px;
-}
-
-.card-box {
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-bottom: 10px;
-}
-
-/* button color */
-.el-button--cyan.is-active,
-.el-button--cyan:active {
-  background: #20b2aa;
-  border-color: #20b2aa;
-  color: #ffffff;
-}
-
-.el-button--cyan:focus,
-.el-button--cyan:hover {
-  background: #48d1cc;
-  border-color: #48d1cc;
-  color: #ffffff;
-}
-
-.el-button--cyan {
-  background-color: #20b2aa;
-  border-color: #20b2aa;
-  color: #ffffff;
-}
-
-/* text color */
-.text-navy {
-  color: #1ab394;
-}
-
-.text-primary {
-  color: inherit;
-}
-
-.text-success {
-  color: #1c84c6;
-}
-
-.text-info {
-  color: #23c6c8;
-}
-
-.text-warning {
-  color: #f8ac59;
-}
-
-.text-danger {
-  color: #ed5565;
-}
-
-.text-muted {
-  color: #888888;
-}
-
-/* image */
-.img-circle {
-  border-radius: 50%;
-}
-
-.img-lg {
-  width: 120px;
-  height: 120px;
-}
-
-.avatar-upload-preview {
-  position: relative;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 200px;
-  height: 200px;
-  border-radius: 50%;
-  box-shadow: 0 0 4px #ccc;
-  overflow: hidden;
-}
-
-/* 拖拽列样式 */
-.sortable-ghost {
-  opacity: 0.8;
-  color: #fff !important;
-  background: #42b983 !important;
-}
-
-.top-right-btn {
-  position: relative;
-  float: right;
-}

src/views/index.vue

 <template>
   <div class="app-container home">
-    <el-button type="primary">主要按钮</el-button>
+    <div class="p-10 text-16 border-primary border rounded-3 mb-10">
+      这是taiwindcss示例，具体参考<a
+        class="text-primary"
+        href="https://www.tailwindcss.cn/"
+        target="_blank"
+        >文档</a
+      >
+    </div>
+    <el-button class="mb-10" type="primary">主要按钮</el-button>
     <ty-tabs
       :tab-list="tabList"
       :default-active-index="defaultActiveIndex"