feat: tailwind 적용

package.json

@@ -22,14 +22,17 @@
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
+    "autoprefixer": "^10.4.7",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.0.3",
     "lint-staged": "^11.1.2",
+    "postcss": "^8.4.14",
     "prettier": "^2.4.1",
     "sass": "^1.51.0",
     "sass-loader": "^12.6.0",
+    "tailwindcss": "^3.1.3",
     "typescript": "~4.5.5"
   },
   "gitHooks": {

postcss.config.js

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

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/main.ts

@@ -2,5 +2,6 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import { createPinia } from "pinia";
+import "./index.css";
 
 createApp(App).use(router).use(createPinia()).mount("#app");

src/pages/class/index.vue

@@ -3,11 +3,20 @@ import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "MyClass",
+  setup() {
+    return {
+      msg: "Hello World",
+    };
+  },
 });
 </script>
 
 <template>
-  <div>MyClass</div>
+  <div>
+    MyClass
+
+    <div class="mt-4">{{ msg }}</div>
+  </div>
 </template>
 
 <style lang="scss" scoped></style>

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};