diff --git a/.eslintignore b/.eslintignore
index 29a10d6f6c0c0ebe7cd4586eb6a691d45ca96b6c..4257ea496b4c53cd81d81c5e47b35836573c5999 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,6 +1,7 @@
 src/registerServiceWorker.js
 src/**/test/**
 craco.config.js
+postcss.config.js
 /build
 /config
 src/serviceWorker.js
diff --git a/craco.config.js b/craco.config.js
index 737896701c3a2d4e0b267eb058d2e6e1b8a97a36..e4102d7311051b6fd7a01de39bcb9da2dfd63794 100644
--- a/craco.config.js
+++ b/craco.config.js
@@ -5,10 +5,15 @@
  * - whenTest ☞ process.env.NODE_ENV === 'test'
  * - whenProd ☞ process.env.NODE_ENV === 'production'
  */
- const { when, whenDev, whenProd, whenTest } = require('@craco/craco')
+const { when, whenDev, whenProd, whenTest } = require('@craco/craco');
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
-const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' )
-const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
+const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' );
+const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
+
+// style相关
+const TailWindCss = require('tailwindcss');
+const AutoPrefixer = require('autoprefixer');
+
 // const FastRefreshCracoPlugin = require('craco-fast-refresh')
 const path = require('path');
 
@@ -24,21 +29,7 @@ const resolve = (dir) => path.join(__dirname, dir);
 module.exports = {
   webpack: {
     alias: {
-      '@': resolve('src'),
-      '@api': resolve('src/api'),
-      '@assects': resolve('src/assets'),
-      '@compontents': resolve('src/compontents'),
-      '@config': resolve('src/config'),
-      '@hooks': resolve('src/hooks'),
-      '@interface': resolve('src/interface'),
-      '@layouts': resolve('src/layouts'),
-      '@model': resolve('src/model'),
-      '@router': resolve('src/router'),
-      '@store': resolve('src/store'),
-      '@styles': resolve('src/styles'),
-      '@typings': resolve('src/typings'),
-      '@utils': resolve('src/utils'),
-      '@views': resolve('src/views'),
+      '@': resolve('src')
     },
     plugins: [
       // 观察打包进度
@@ -65,5 +56,13 @@ module.exports = {
     // {
     //   plugin: FastRefreshCracoPlugin
     // }
-  ]
+  ],
+  style: {
+    postcss: {
+      plugins: [
+        require('tailwindcss'),
+        require('autoprefixer'),
+      ],
+    },
+  },
 }
diff --git a/package.json b/package.json
index 598c084170b401ba331b8caa70f4f644e0650ab0..193b22a550f7c62cc2373e5027351e2bce352023 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,6 @@
   "homepage": "/react-store-admin",
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
-    "@craco/craco": "^6.2.0",
     "@icon-park/react": "^1.3.3",
     "@types/node": "^15.12.4",
     "@types/react": "^17.0.11",
@@ -13,6 +12,7 @@
     "@types/react-router": "^5.1.15",
     "ahooks": "^2.10.9",
     "antd": "^4.16.3",
+    "autoprefixer": "^9.8.6",
     "axios": "^0.21.1",
     "dayjs": "^1.10.5",
     "js-cookie": "^2.2.1",
@@ -20,6 +20,7 @@
     "mobx": "^6.3.2",
     "mobx-react": "^7.2.0",
     "nprogress": "^0.2.0",
+    "postcss": "^7.0.36",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^17.0.2",
@@ -29,6 +30,7 @@
     "react-transition-group": "^4.4.2",
     "screenfull": "^5.1.0",
     "simple-progress-webpack-plugin": "^2.0.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",
     "web-vitals": "^1.1.2",
     "webpack-bundle-analyzer": "^4.4.2"
   },
@@ -58,6 +60,8 @@
     ]
   },
   "devDependencies": {
+    "@craco/craco": "^6.2.0",
+    "@tailwindcss/postcss7-compat": "^2.2.7",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.1.9",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..f1c8dac8d2fd5682cf235f9987dfd91eff0aeb5e
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
diff --git a/src/layouts/index.scss b/src/layouts/index.scss
index 490f3d11a4b8e122701b7aa99c346d1e7b17cd1e..da457f24f7f9d15abcf2df2a765431fcb6378593 100644
--- a/src/layouts/index.scss
+++ b/src/layouts/index.scss
@@ -31,10 +31,13 @@
       height: 64px;
       line-height: 64px;
       overflow: hidden;
-      .app-logo-img{
-        width: 60px;
-        margin-left: 25px;
-        animation: app-logo-spin infinite 10s linear;
+      .logo-wrap {
+        @apply flex;
+        .app-logo-img{
+          width: 60px;
+          margin-left: 25px;
+          animation: app-logo-spin infinite 10s linear;
+        }
       }
       @keyframes app-logo-spin {
         from {
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 9b7aa4157baa3095d71bdbf13d5253b901243a98..445d50799991537f44362e196e094521e7accd46 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,4 +1,7 @@
 @import '~antd/dist/antd.css';
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 @import 'common';
 @import 'override';
-@import 'main';
\ No newline at end of file
+@import 'main';
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 3cf2b31ca1c0ab76782c1770c14e2fcdd67c83d3..c312cef61a005a7cd612527ee0c5c91ec86cb4db 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -19,4 +19,8 @@ a:hover {
 	visibility: hidden;
 	display: block;
 	clear: both;
-}
\ No newline at end of file
+}
+svg,img {
+  display: block!important;
+  vertical-align: center!important;
+}
diff --git a/src/views/login/login.scss b/src/views/login/login.scss
index 9fe98925bf93d9a21437404d90f13de92d7c80b2..daad5465c26344f5a972ea4f067c391289d4d3b3 100644
--- a/src/views/login/login.scss
+++ b/src/views/login/login.scss
@@ -20,15 +20,15 @@
   }
 }
 .imgcode-item{
-  .ant-form-item-control-input-content{
-    display: flex;
-  }
-  .ant-form-item-control-input{
-    width: 322px;
+  .ant-form-item-control-input-content {
+    @apply flex;
+    .ant-form-item {
+      width: 322px;
+    }
   }
   .captcha{
     height: 40px;
     border: 1px solid #ccc;
     cursor: pointer;
   }
-}
\ No newline at end of file
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..88243461e5263c2e2ce3b1afcd5566ade55f653f
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  purge: [
+    './src/**/*.html',
+    './src/**/*.tsx',
+    './src/**/*.ts',
+    './src/**/*.js',
+  ],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}