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
-
We start with image not being centered.
img
tag hasdisplay: block
in TailwindCSS instead ofdisplay: inline
which is default. From docsImages and other replaced elements (like svg, video, canvas, and others) are display: block by default.
-
Fix this by setting left and right margins to
auto
withmx-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
- 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. - We can set headers styling as a part of our base styles. But in this case we would add classes inline.
-
Add
text-4xl font-bold
to ourh1
tag insrc/components/HelloWorld.vue
- <h1>{{ msg }}</h1> + <h1 class="text-4xl font-bold">{{ msg }}</h1>
Set margins
- TailwindCSS has no default margins as well. From docs > Preflight removes all of the default margins from elements like headings, blockquotes, paragraphs, etc.
-
Add
my-6
to ourh1
to oursrc/components/HelloWorld.vue
- <h1 class="text-4xl font-bold">{{ msg }}</h1> + <h1 class="text-4xl font-bold my-6">{{ msg }}</h1>
-
Create css selector for
p
withmy-4
class instyle
part of oursrc/components/HelloWorld.vue
SFC.
<style scoped> +p { + @apply my-4; +} +
Update code
text styles
- If we compare how our
code
tags look tovue-ts
template, we will see that text a little bigger. -
Fix that by adding
text-sm
class to ourcode
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
- 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:
- 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
git add -u
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
Top comments (0)