Vite vue ts tailwind template: Convert styles to TailwindCSS classes and configs (Part 3)

Preflight

TailwindCSS built on top of modern-normalize and has set of opinionated base styles.
From docs:

Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

Because of that our project looks like this

instead of looking like this

to fix that we could disable preflight. But a better way would be explictly styling our code. This will ensure that our template looks same in all browsers.

Fix missing styles

Center img

1. We start with image not being centered. img tag has display: block in TailwindCSS instead of display: inline which is default. From docs

   Images and other replaced elements (like svg, video, canvas, and others) are display: block by default.

2. Fix this by setting left and right margins to auto with mx-auto class.
   

   -  <img alt="Vue logo" src="./assets/logo.png" />
   +  <img class="mx-auto" alt="Vue logo" src="./assets/logo.png" />
   

Add h1 text styles

1. Next, our h1. From docs > All heading elements are completely unstyled by default, and have the same font-size and font-weight as normal text.
2. We can set headers styling as a part of our base styles. But in this case we would add classes inline.

3. Add text-4xl font-bold to our h1 tag in src/components/HelloWorld.vue
   

   -  <h1>{{ msg }}</h1>
   +  <h1 class="text-4xl font-bold">{{ msg }}</h1>
   

Set margins

1. TailwindCSS has no default margins as well. From docs > Preflight removes all of the default margins from elements like headings, blockquotes, paragraphs, etc.

2. Add my-6 to our h1 to our src/components/HelloWorld.vue
   

   -  <h1 class="text-4xl font-bold">{{ msg }}</h1>
   +  <h1 class="text-4xl font-bold my-6">{{ msg }}</h1>
   

3. Create css selector for p with my-4 class in style part of our src/components/HelloWorld.vue SFC.
   

    <style scoped>
   +p {
   +  @apply my-4;
   +}
   +
   

Update code text styles

1. If we compare how our code tags look to vue-ts template, we will see that text a little bigger.

2. Fix that by adding text-sm class to our code styles.
   

    code {
   -  @apply bg-code py-0.5 px-1 text-code;
   +  @apply bg-code py-0.5 px-1 text-code text-sm;
    }
   

Style button

1. In addition, boarder styles are reset too. From docs > In order to make it easy to add a border by simply adding the border class, Tailwind overrides the default border styles for all elements with the following rules:
2. So we have to manually set our button styling

-  <button type="button" @click="count++">count is: {{ count }}</button>
+  <button
+    class="
+      bg-white
+      hover:bg-gray-50
+      py-2
+      px-4
+      border border-gray-200
+      rounded
+      shadow-sm
+    "
+    type="button"
+    @click="count++"
+  >
+    count is: {{ count }}
+  </button>

Commit all the changes above

1. git add -u
2. git commit -m 'fix styles missing because of preflight'

Links

• https://github.com/sindresorhus/modern-normalize
• https://tailwindcss.com/docs/preflight
• https://tailwindcss.com/docs/preflight#images-are-block-level
• https://stackoverflow.com/questions/11856150/center-an-image-horizontally-using-css
• https://tailwindcss.com/docs/preflight#headings-are-unstyled
• https://tailwindcss.com/docs/adding-base-styles
• https://tailwindcss.com/docs/preflight#default-margins-are-removed
• https://tailwindcss.com/docs/margin
• https://tailwindcss.com/docs/margin#customizing
• https://tailwindcss.com/docs/padding
• https://tailwindcss.com/docs/preflight#border-styles-are-reset-globally
• https://tailwindcss.com/docs/preflight#buttons-have-a-default-outline

Project

imomaliev / vue-ts-tailwind

Vite + Vue + TypeScript + TailwindCSS template