feat(*.config.js): 添加了Tailwind CSS相关全局配置

package.json

@@ -22,6 +22,7 @@
         "cz-conventional-changelog": "^3.3.0",
         "husky": "^8.0.3",
         "standard": "^17.0.0",
+        "tailwindcss": "2.x",
         "vue": "^3.2.13"
     },
     "devDependencies": {

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

src/common/constants.js

@@ -1,6 +1,6 @@
 // 定义共用常量
 const CONSTANTS = Object.freeze({
-    DEFAULT: 'to be deleted'
+  DEFAULT: 'to be deleted'
 })
 
 export default CONSTANTS

src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './renderer/App.vue'
+import './renderer/assets/index.css'
 
 createApp(App).mount('#app')

src/main/filesystem/index.js

@@ -2,4 +2,4 @@
 class App {
 
 }
-export default App
+export default App

tailwind.config.js

@@ -0,0 +1,142 @@
+const plugin = require('tailwindcss/plugin')
+const colors = require('tailwindcss/colors')
+
+module.exports = {
+  purge: {
+    enabled: true,
+    content: [
+      './**/*.html',
+      './*.html',
+      './**/*.js',
+      './*.js',
+      './**/*.vue',
+      './*.vue'
+    ],
+    options: {
+      safelist: []
+    }
+  },
+  theme: {
+    colors: {
+      ...colors
+    },
+    extend: {
+      minHeight: {
+        'screen-75': '75vh'
+      },
+      fontSize: {
+        55: '55rem'
+      },
+      opacity: {
+        80: '.8'
+      },
+      zIndex: {
+        2: 2,
+        3: 3
+      },
+      inset: {
+        '-100': '-100%',
+        '-225-px': '-225px',
+        '-160-px': '-160px',
+        '-150-px': '-150px',
+        '-94-px': '-94px',
+        '-50-px': '-50px',
+        '-29-px': '-29px',
+        '-20-px': '-20px',
+        '25-px': '25px',
+        '40-px': '40px',
+        '95-px': '95px',
+        '145-px': '145px',
+        '195-px': '195px',
+        '210-px': '210px',
+        '260-px': '260px'
+      },
+      height: {
+        '95-px': '95px',
+        '70-px': '70px',
+        '350-px': '350px',
+        '500-px': '500px',
+        '600-px': '600px'
+      },
+      maxHeight: {
+        '860-px': '860px'
+      },
+      maxWidth: {
+        '100-px': '100px',
+        '120-px': '120px',
+        '150-px': '150px',
+        '180-px': '180px',
+        '200-px': '200px',
+        '210-px': '210px',
+        '580-px': '580px'
+      },
+      minWidth: {
+        '140-px': '140px',
+        48: '12rem'
+      },
+      backgroundSize: {
+        full: '100%'
+      }
+    }
+  },
+  variants: [
+    'responsive',
+    'group-hover',
+    'focus-within',
+    'first',
+    'last',
+    'odd',
+    'even',
+    'hover',
+    'focus',
+    'active',
+    'visited',
+    'disabled'
+  ],
+  plugins: [
+    require('@tailwindcss/forms'),
+    plugin(function ({ addComponents, theme }) {
+      const screens = theme('screens', {})
+      addComponents([
+        {
+          '.container': { width: '100%' }
+        },
+        {
+          [`@media (min-width: ${screens.sm})`]: {
+            '.container': {
+              'max-width': '640px'
+            }
+          }
+        },
+        {
+          [`@media (min-width: ${screens.md})`]: {
+            '.container': {
+              'max-width': '768px'
+            }
+          }
+        },
+        {
+          [`@media (min-width: ${screens.lg})`]: {
+            '.container': {
+              'max-width': '1024px'
+            }
+          }
+        },
+        {
+          [`@media (min-width: ${screens.xl})`]: {
+            '.container': {
+              'max-width': '1280px'
+            }
+          }
+        },
+        {
+          [`@media (min-width: ${screens['2xl']})`]: {
+            '.container': {
+              'max-width': '1280px'
+            }
+          }
+        }
+      ])
+    })
+  ]
+}