<p>Creating a handful of components to render the data that loaded from a JSON file was covered in the <a href="/posts/2022/first-rudimentary-mercenary-components/">previous post</a>. It can feel a little defeating to just have a dump of content without any style to it. This step of the tutorial will cover implementing TailwindCSS to our project and adding some basic styling.</p>
<p><img src="/images/hsmercs-banner-varden.png" alt="No one is as pretty as Varden"></p>
<blockquote>
<p>The fourth in a series of posts on <a href="/series/hsmercs-from-scratch">'HSMercs Helper From Scratch'</a>, a tutorial for recreating <em><a href="https://hsmercs.rovani.net">HSMercs Helper</a></em>.</p>
</blockquote>
<p>The native <a href="https://tailwindcss.com/docs/guides/vite">tutorial for installing</a> Tailwind CSS with Vue 3 and Vite is straightforward and easy to follow. Most of what you'll see in this post is following the steps in that post.</p>
<pre><code>yarn add -D tailwindcss postcss autoprefixer
</code></pre>
<p><em><a href="https://postcss.org/">PostCSS</a></em> is a tool for transforming styles with JS plugins. These plugins can lint the CSS, support variables and mixins, transpile future CSS syntax, create inline images, and more. The <em><a href="https://github.com/postcss/autoprefixer">Autoprefixer</a></em> plugin parses CSS and adds vendor prefixes to CSS rules using values from <em><a href="https://caniuse.com/">Can I Use</a></em>. Together, these provide the functionality that Tailwind uses to pump out the CSS we need it to.</p>
<p>The official tutorial now instructs you to run the command <code>yarn tailwindcss init -p</code> which creates a <code>postcss.config.js</code> file for <em>PostCSS</em> configuration and a <code>tailwind.config.js</code> file for Tailwind specific configuration.</p>
<h4>postcss.config.js</h4>
<pre><code>module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
</code></pre>
<p>This tells <em>PostCSS</em> to utilize the <code>tailwindcss</code> and <code>autoprefixer</code> plugins.</p>
<h4>tailwind.config.js</h4>
<pre><code>module.exports = {
  content: ["./index.html", "./src/**/*.{vue,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
</code></pre>
<p>Additional configuration is provided to <em>TailwindCSS</em> informing it to parse the root <code>/index.html</code> file and all <code>.vue</code> and <code>.ts</code> files anywhere under the <code>src</code> folder.</p>
<h4>src/index.css</h4>
<pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;
</code></pre>
<p>These three layers are where PostCSS and Autoprefixer inject the styles that Tailwind generates.</p>
<h4>src/main.ts</h4>
<pre><code>  import { createApp } from 'vue'
  import App from './App.vue'
+ import './index.css'
  import { store } from './store'
  
  
  createApp(App)
      .use(store)
      .mount('#app')
</code></pre>
<p>The main script file loads the Tailwind generates CSS file into the full app. All of the magic happens behind the scenes, so we won't go into the details on how or why this happens. We're just happy it works.</p>
<h4>src/App.vue</h4>
<pre><code>  &#x3C;template>
+   &#x3C;header class="ml-4 p-4 rounded-bl-md border-l-2 border-b-2">
+     &#x3C;div class="text-2xl font-extrabold">HSMercs Helper&#x3C;/div>
+     &#x3C;div class="font-light">A set of tools for Hearthstone Mercenaries players.&#x3C;/div>
    &#x3C;/header>
    &#x3C;Mercenaries>&#x3C;/Mercenaries>
  &#x3C;/template>
</code></pre>
<p>This applies a little styling to the header section of the app. Eventually, we will be putting navigation to different tools up there, so it is nice to give it some visual separation.</p>
<h4>src/components/Mercenaries.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;section>
+   &#x3C;h1 class="text-xl mx-8">Collectable Mercenaries&#x3C;/h1>
+   &#x3C;div class="flex flex-wrap gap-2 px-2">
      &#x3C;MercenaryCard
        v-for="(merc, mercName) in mercenaries"
        :key="mercName"
        v-bind="merc"
        >{{ mercName }}
      &#x3C;/MercenaryCard>
    &#x3C;/div>
  &#x3C;/section>
&#x3C;/template>
</code></pre>
<p>When there is a set of cards, and we don't particularly care how many are in a row, the best case is to use <code>flex</code> on the container, instructing the browser to place entries next to each other, and wrap (<code>flex-wrap</code>) onto the next line when the block element won't fit in the viewport. <code>px-2</code> means to put a small padding on the left and right side of the container and <code>gap-2</code> instructs flex to keep a small space between elements.</p>
<pre><code>yarn dev
</code></pre>
<p><img src="/images/hsmercs-mercstyled.png" alt="A little style!"></p>
<p>One of this first things I panicked on when I first installed Tailwind was that all of my text was suddenly the same size. What did I screw up?!</p>
<p>Well, fear not; this is intentional. The directive <code>@tailwind base</code> contains reset rules (called <a href="https://tailwindcss.com/docs/preflight">Preflight</a>)that clear all of the browser defaults. Since each browser has slightly different default stylying, the first thing Tailwind does is strip it all out.</p>
<h2>Style Some More Components</h2>
<p>Most of the styling is going to be inside the Mercenary Card or one of its children. We can start by throwing around a couple classes and seeing what happens. Now is a good time to experiment and see what you like. This first pass doesn't involve adding any color or images, it is strictly to improve readability of the basic content.</p>
<h4>src/components/MercenaryCard.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div
+   class="grid grid-rows-3 w-96 rounded-md border-2 gap-y-1 pb-1"
  >
    &#x3C;div>
      &#x3C;div
+       class="flex justify-between px-2 py-1 text-white bg-gray-700"
      >
+       &#x3C;h2 class="font-bold text-xl whitespace-nowrap">
          &#x3C;slot />
        &#x3C;/h2>
      &#x3C;/div>
+     &#x3C;div class="grid grid-cols-5 justify-around place-items-center px-2">
        &#x3C;Attack :role="role" :attack="attack" />
        &#x3C;Tribe :tribe="tribe" />
        &#x3C;Health :role="role" :health="health" />
+       &#x3C;Rarity class="col-span-2" :rarity="rarity" />
      &#x3C;/div>
    &#x3C;/div>
+   &#x3C;div class="grid grid-cols-3 gap-x-1">
      &#x3C;AbilityStamp
        v-for="(ability, abilityName) in abilities"
        :key="abilityName"
        :ability="ability"
        class="rounded"
        >{{ abilityName }}
      &#x3C;/AbilityStamp>
    &#x3C;/div>
+   &#x3C;div class="grid grid-cols-3 gap-x-1">
      &#x3C;ItemStamp
        v-for="(item, itemName) in equipment"
        :key="itemName"
        :item="item"
        >{{ itemName }}
      &#x3C;/ItemStamp>
    &#x3C;/div>
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<p><strong>This right here</strong> is why I think CSS is so frickin' cool. We made a small adjustment to the CSS and BOOM, it looks so incredibly different. I get excited when I start seeing things really begin to take shape.</p>
<p>I hope you're getting excited, too.</p>
<p><img src="/images/hsmercs-mercs-level1styled.png" alt="HS Mercs - adding style to the MercenaryCard"></p>
<p>Let's do a some touch-up here and there by going into some of the components and applying a little style.</p>
<h4>src/components/AbilityStamp.vue</h4>
<pre><code>&#x3C;template>
+ &#x3C;div class="border rounded text-sm sm:text-base text-center">
    &#x3C;slot />
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<h4>src/components/Attack.vue</h4>
<pre><code>&#x3C;template>
+ &#x3C;div class="text-center font-bold w-10 h-10 text-xl p-2">
    {{ attack }}
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<h4>src/components/Health.vue</h4>
<pre><code>&#x3C;template>
+ &#x3C;div class="text-center font-bold w-10 h-10 text-xl p-2">
    {{ health }}
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<h4>src/components/ItemStamp.vue</h4>
<pre><code>&#x3C;template>
+ &#x3C;div class="border rounded text-sm sm:text-base text-center">
    &#x3C;slot />
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<h4>src/components/Tribe.vue</h4>
<pre><code>&#x3C;template>
+ &#x3C;div class="whitespace-nowrap text-center">
+   &#x3C;span class="align-middle">{{ tribe }}&#x3C;/span>
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<p>Those little touches don't add much, but they set us to for the next stage in styling, which is to start having fun with dynamic colors and images based on properties of the mercenary.</p>
<p><img src="/images/hsmercs-mercs-level2styled.png" alt="HSMercs - level 2 shaping"></p>
<h2>Time For Some Images</h2>
<p>All this grey and white and boxes is getting boring. The excitement is starting to wear off. Time to add some pictures into this. Head over to the repo for this project and download the images from the <a href="https://github.com/drovani/hsmercs-helper/tree/main/assets">"/assets/" folder</a>. It's safe to grab all of the images in that folder, but if you want to be selective, these are the ones we are going to work with first.</p>
<h4>Assets Folder</h4>
<pre><code>├── assets
│   ├── alliance-watermark.png
│   ├── caster-attack.png
│   ├── caster-health.png
│   ├── epic.png
│   ├── fighter-attack.png
│   ├── fighter-health.png
│   ├── horder-watermark.png
│   ├── legendary.png
│   ├── neutral-attack.png
│   ├── neutral-health.png
│   ├── protector-attack.png
│   ├── protector-health.png
│   ├── rare.png
</code></pre>
<p>Be sure to place the <code>assets</code> folder at the root.</p>
<h4>src/components/Attack.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div
+   class="bg-center bg-contain bg-no-repeat text-center font-bold text-white w-10 h-10 text-xl p-2"
+   :style="{
+     'background-image': `url('/assets/${role.toLowerCase()}-attack.png')`,
+   }"
  >
    {{ attack }}
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<h4>src/components/Health.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div
+   class="bg-center bg-contain bg-no-repeat text-center font-bold text-white w-10 h-10 text-xl p-2"
+   :style="{
+     'background-image': `url('/assets/${role.toLowerCase()}-health.png')`,
+   }"
  >
    {{ health }}
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<p>If you've left the <code>vite</code> server running, your place should be autorefreshing with the new content when you save the Vue files. If not, go ahead and start it up, now. You can see how the affect of the <code>role</code> property plays out by dynamically setting the URL of the background image.</p>
<h4>src/components/Rarity.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div>
+   &#x3C;img
+     class="max-h-6 inline"
+     :src="`./assets/${rarity.toLowerCase()}.png`"
+     :alt="rarity"
+   />
    {{ rarity }}
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<p>Tailwind's Preflight sets the <code>img</code> to <code>display:block</code>, so we need to set it back to <code>inline</code> for this instance. The <code>max-h-6</code> is there to keep the image contained. We could also set an explicit height or width, but I prefer telling it the maximum allowed size and if the container shrinks, then the image will scale, too.</p>
<p><img src="/images/hsmercs-mercs-level2images.png" alt="HSMercs - level 2 images"></p>
<h3>Tailwind Custom Colors</h3>
<p>The next style we are going to implement is to color the border and the top bibbon of each card based on the class. Looking through Tailwind's <a href="https://tailwindcss.com/docs/customizing-colors#default-color-palette">default color palette</a>, the colors red-800, green-800, and blue-800 seem to nicely fit with the Mercenaries color palette. However, instead of having to remember which color we picked for each class, and which shade is the right one, Tailwind allows us to create custom named colors.</p>
<h4>tailwind.config.js</h4>
<pre><code>+ const colors = require("tailwindcss/colors");
  
  module.exports = {
    content: ["./index.html", "./src/**/*.{vue,ts}"],
    theme: {
      extend: {
+       colors: {
+         protector: colors.red[800],
+         fighter: colors.green[800],
+         caster: colors.blue[800],
+       },
      },
    },
    plugins: [],
  };
</code></pre>
<p>The Tailwind compiler (and the VSCode Intellisense) now know that "protector", "fighter", and "caster" are valid colors.</p>
<h4>src/components/MercenaryCard.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div
    class="grid grid-rows-3 w-96 rounded-md border-2 gap-y-1 pb-1"
+   :class="{
+     'border-protector': role == 'Protector',
+     'border-fighter': role == 'Fighter',
+     'border-caster': role == 'Caster',
+   }"
  >
    &#x3C;div>
      &#x3C;div
        class="flex justify-between px-2 py-1 text-white bg-gray-700"
+       :class="{
+         'bg-protector': role == 'Protector',
+         'bg-fighter': role == 'Fighter',
+         'bg-caster': role == 'Caster',
+       }"
      >
        &#x3C;h2 class="font-bold text-xl whitespace-nowrap">
          &#x3C;slot />
        &#x3C;/h2>
      &#x3C;/div>
...
    &#x3C;/div>
...
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<p>How cool is that?! Using the <code>role</code> prop, Vue assigns the right border and background class to use. Tailwind knows to generate the appropriate CSS class to match the colors we want.</p>
<h3>Tribe &#x26; Faction</h3>
<p>There is a concept in Mercenaries PVE where some tribes are a part of the "Alliance" faction, others are in the "Horde", and the rest are neutral or without a faction. Instead of doing a long set of logic in the <code>&#x3C;template></code> block, we'll create a <code>computed</code> property that will evaluate the faction based on the mercenary's tribe.</p>
<h4>src/components/Tribe.vue</h4>
<pre><code>  &#x3C;template>
    &#x3C;div
+     class="bg-center bg-no-repeat bg-contain h-10 whitespace-nowrap min-w-[6rem] text-center"
+     :style="{
+       'background-image': backgroundImage,
+     }"
    >
      &#x3C;span class="align-middle">{{ tribe }}&#x3C;/span>
    &#x3C;/div>
  &#x3C;/template>
  &#x3C;script setup lang="ts">
+ import { computed } from "vue";

  const props = defineProps({
    tribe: {
      type: String,
    },
  });

+ const horde = ["Blood Elf", "Goblin", "Half-Orc", "Orc", "Tauren", "Troll", "Undead"];
+ const alliance = ["Draenei", "Dwarf", "Gnome", "High Elf", "Human", "Night Elf"];
+ 
+ const faction = computed(() => {
+   return horde.find(t => t === props.tribe)
+     ? "Horde"
+     : alliance.find(t => t === props.tribe)
+     ? "Alliance"
+     : "Neutral";
+ });

+ const backgroundImage = computed((): string => {
+   if (faction.value === "Horde" || faction.value === "Alliance") {
+     return `url('/assets/${faction.value.toLowerCase()}-watermark.png')`;
+   }
+   return "unset";
+ });
  &#x3C;/script>
</code></pre>
<p>The two arrays tell us which tribes are in which factions and the <code>faction</code> computed property does a quick look-up. We then utilize that value to drive the <code>background-image</code> style for the <code>div</code>.</p>
<p><img src="/images/hsmercs-mercs-level1dynamic.png" alt="HSMercs - Round 1 Styling Complete"></p>


Rovani's Sandbox

tailwindcss

HSMercs From Scratch 4:Adding Some Style