样式系统

.eslintcache

@@ -1 +1 @@
-[{"/Users/yangtao/projects/sheep-ui/sheep-ui/vite.config.ts":"1","/Users/yangtao/projects/sheep-ui/sheep-ui/.eslintrc.js":"2"},{"size":212,"mtime":1646617615331,"results":"3","hashOfConfig":"4"},{"size":374,"mtime":1646618430674,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","suppressedMessages":"8","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"r3sp3h",{"filePath":"9","messages":"10","suppressedMessages":"11","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/yangtao/projects/sheep-ui/sheep-ui/vite.config.ts",[],[],"/Users/yangtao/projects/sheep-ui/sheep-ui/.eslintrc.js",[],[]]
+[{"/Users/yangtao/projects/sheep-ui/sheep-ui/vite.config.ts":"1","/Users/yangtao/projects/sheep-ui/sheep-ui/.eslintrc.js":"2","/Users/yangtao/projects/sheep-ui/sheep-ui/docs/vite.config.ts":"3"},{"size":212,"mtime":1646617615331,"results":"4","hashOfConfig":"5"},{"size":374,"mtime":1646618430674,"results":"6","hashOfConfig":"5"},{"size":136,"mtime":1646621421690,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","suppressedMessages":"10","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"r3sp3h",{"filePath":"11","messages":"12","suppressedMessages":"13","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"14","messages":"15","suppressedMessages":"16","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/yangtao/projects/sheep-ui/sheep-ui/vite.config.ts",[],[],"/Users/yangtao/projects/sheep-ui/sheep-ui/.eslintrc.js",[],[],"/Users/yangtao/projects/sheep-ui/sheep-ui/docs/vite.config.ts",[],[]]

postcss.config.js

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

src/App.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-// import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from './components/HelloWorld.vue'
 import Test from './components/Test'
 </script>
 
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <!-- <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> -->
+  <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
+  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
   <Test></Test>
 </template>
 

src/components/HelloWorld.vue

@@ -7,30 +7,7 @@ const count = ref(0)
 </script>
 
 <template>
-  <h1>{{ msg }}</h1>
-
-  <p>
-    Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-  </p>
-
-  <p>See <code>README.md</code> for more information.</p>
-
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Docs
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
-  </p>
-
-  <button type="button" @click="count++">count is: {{ count }}</button>
-  <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
-  </p>
+  <h1 class="text-3xl font-bold underline">{{ msg }}</h1>
 </template>
 
 <style scoped>

src/index.scss

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

src/main.ts

@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
+import './index.scss'
+
 createApp(App).mount('#app')

tailwind.config.js

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