VITE VUE TS TARWAYテンプレート:スタイルをTailWindCSSクラスと設定に変換する(その3 )

7338 ワード

tailwindcss vue vite テキストリンク

予備飛行

上に構築されたTarwindCcssmodern-normalize そして、独創的なベース・スタイルのセットをします.
から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.

そのため、我々のプロジェクトはこのように見えます

この代わりに

修正するにはdisable preflight . しかし、より良い方法は明らかに我々のコードを整えるでしょう.これは、我々のテンプレートがすべてのブラウザーで同じように見えるのを確実にします.

固定スタイル

センターIMG

画像を中心に開始します.img タグdisplay: block の代わりにdisplay: inline デフォルトです.からdocs

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

設定で修正left and right margins to auto with mx-auto クラス.

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

テキストスタイルを追加

次はh1 . からdocs
すべての見出し要素は、デフォルトで完全にunstyledされて、同じフォントサイズとフォント重量を通常のテキストとして持ちます.

我々は我々の一部としてヘッダースタイリングを設定することができますbase styles . しかし、この場合、インラインクラスを追加します.

追加text-4xl font-bold 我々にh1 タグsrc/components/HelloWorld.vue

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

余白を設定する

TailWindCSSもデフォルトのマージンがありません.からdocs
> PreFlightは、見出し、ブロッククォート、段落などのような要素からデフォルトの余白をすべて削除します.

追加my-6 我々にh1 我々にsrc/components/HelloWorld.vue

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

CSSセレクターp with my-4 クラスstyle 我々の一部src/components/HelloWorld.vue SFC

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

コードのテキストスタイルを更新

我々が比較するならばcode タグを探すvue-ts テンプレートは、テキストを少し大きく表示されます.

追加で修正する text-sm クラストゥcode スタイル.

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

スタイルボタン

また、ボーダースタイルもリセットされます.からdocs
境界クラスを追加するだけで境界を追加するには、次の規則を使用してすべての要素の既定のボーダースタイルをオーバーライドします.

だから、手動で設定する必要がありますbutton スタイリング

-  <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>