Adding tailwind css and working with components.

package.json

@@ -16,9 +16,12 @@
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
+    "autoprefixer": "^9.8.8",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
+    "eslint-plugin-vue": "^7.0.0",
+    "postcss": "^7.0.39",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
   },
   "eslintConfig": {
     "root": true,

postcss.config.js

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

src/App.vue

@@ -42,8 +42,8 @@
   <p>Adding heros to the list - Heros count {{ herosCount }}</p>
   <h2>{{ fullname }}</h2>
   <button @click="setFullName">Set Full name</button>
-  <h2>{{fname}}</h2>
-  <h2>{{lname}}</h2>
+  <h2>{{ fname }}</h2>
+  <h2>{{ lname }}</h2>
   <p>Computed: {{ randC }}</p>
   <p>Computed: {{ randC }}</p>
   <p>Computed: {{ randC }}</p>
@@ -63,24 +63,51 @@
 
   <p>Total Heros is {{ herosCount }}</p>
 
-  <h1>Adding heros to the list properly</h1>
+  <div class="w-full flex">
+    <div class="m-auto">
+      <h1 class="text-2xl text-center">Adding heros to the list properly</h1>
 
-  <ul>
-    <li v-for="(hero, index) in herosArrayOfObjects" v-bind:key="index">
-      <div>{{ hero.name }} <button @click="removeHero(index)">x</button></div>
-    </li>
-  </ul>
+      <ul>
+        <li class="flex justify-between" v-for="(hero, index) in herosArrayOfObjects" :key="hero.name">
+          <div>
+            {{ hero.name }} 
+          </div>
+          <button @click="removeHero(index)">x</button>
+        </li>
+      </ul>
 
-  <form @submit.prevent="addHero()">
-    <input type="text" v-model="newHero" placeholder="Type a new hero here" />
-    <button @click="newHero">Add a new hero</button>
-  </form>
+      <form class="mt-10" @submit.prevent="addHero()">
+        <input class="border rounded"
+          type="text"
+          v-model="newHero"
+          placeholder="Type a new hero here"
+        />
+        <button class="border rounded bg-gradient-to-t from-red-200 to-green-200 text-sm ml-10" @click="newHero">Add a new hero</button>
+      </form>
+    </div>
+  </div>
+
+   <div class="w-full flex">
+    <div class="m-auto">
+      <h1 class="text-2xl text-center">Using Components</h1>
+      <AppHeader/>
+      <AppHeros/>
+
+    </div>
+  </div>
 
   <!-- 2:17:02 -->
 </template>
 
 <script>
+import AppHeader from "./components/AppHeader"
+import AppHeros from "./components/AppHeros.vue"
+
 export default {
+  components: {
+    AppHeader,
+    AppHeros
+  },
   data() {
     return {
       title: "DC Heros",
@@ -114,17 +141,17 @@ export default {
         this.newHero = "";
       }
     },
-    removeHero(index){
-      this.herosArrayOfObjects = this.herosArrayOfObjects.filter((hero, i) => i != index)
+    removeHero(index) {
+      this.herosArrayOfObjects = this.herosArrayOfObjects.filter(
+        (hero, i) => i != index
+      );
     },
     randM() {
       return Math.random();
     },
-    setFullName(){
-      
-      this.fullname = 'New Name'
-
-    }
+    setFullName() {
+      this.fullname = "New Name";
+    },
   },
   computed: {
     herosCount() {
@@ -137,11 +164,11 @@ export default {
       get() {
         return this.fname + " " + this.lname;
       },
-      set(fullname){
-        const values = fullname.split(" ")
-        this.fname = values[0]
-        this.lname = values[1]
-      }
+      set(fullname) {
+        const values = fullname.split(" ");
+        this.fname = values[0];
+        this.lname = values[1];
+      },
     },
   },
 };

src/assets/styles.css

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

src/components/AppHeader.vue

@@ -0,0 +1,12 @@
+<template>
+  <nav class="w-full bg-gradient-to-r from from-blue-900 to-blue-400 px-4 py-2">
+      <a href="" class="text-white">HEROS</a>
+  </nav>
+</template>
+
+<script>
+</script>
+
+<style>
+
+</style>

src/components/AppHeros.vue

@@ -0,0 +1,67 @@
+<template>
+  <ul>
+    <li
+      class="flex justify-between"
+      v-for="(hero, index) in herosArrayOfObjects"
+      :key="hero.name"
+    >
+      <div>
+        {{ hero.name }}
+      </div>
+      <button @click="removeHero(index)">x</button>
+    </li>
+  </ul>
+
+  <form class="mt-10" @submit.prevent="addHero()">
+    <input
+      class="border rounded"
+      type="text"
+      v-model="newHero"
+      placeholder="Type a new hero here"
+    />
+    <button
+      class="
+        border
+        rounded
+        bg-gradient-to-t
+        from-red-200
+        to-green-200
+        text-sm
+        ml-10
+      "
+      @click="newHero"
+    >
+      Add a new hero
+    </button>
+  </form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      herosArrayOfObjects: [
+        { name: "Batman" },
+        { name: "Superman" },
+        { name: "flash" },
+      ],
+    };
+  },
+  methods:{
+      addHero() {
+      if (this.newHero !== "") {
+        this.herosArrayOfObjects.push({ name: this.newHero });
+        this.newHero = "";
+      }
+    },
+    removeHero(index) {
+      this.herosArrayOfObjects = this.herosArrayOfObjects.filter(
+        (hero, i) => i != index
+      );
+    },
+  }
+};
+</script>
+
+<style>
+</style>

src/main.js

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

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}