VITE VUE TS TARWAYテンプレート:スタイルをTailWindCSSクラスと設定に変換する(その3 )
7338 ワード
予備飛行
上に構築された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されて、同じフォントサイズとフォント重量を通常のテキストとして持ちます.
追加
text-4xl font-bold 我々にh1 タグsrc/components/HelloWorld.vue- <h1>{{ msg }}</h1>
+ <h1 class="text-4xl font-bold">{{ msg }}</h1>
余白を設定する
> 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;
}
スタイルボタン
境界クラスを追加するだけで境界を追加するには、次の規則を使用してすべての要素の既定のボーダースタイルをオーバーライドします.
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>
上記の全ての変更をコミットする
git add -u git commit -m 'fix styles missing because of preflight' リンク
プロジェクト
イモリマリフ / VUE TS
VITE + Vue +タイプスクリプト+ TailWindCSSテンプレート
Reference
この問題について(VITE VUE TS TARWAYテンプレート:スタイルをTailWindCSSクラスと設定に変換する(その3 )), 我々は、より多くの情報をここで見つけました https://dev.to/imomaliev/vite-vue-ts-tailwind-template-convert-styles-to-tailwindcss-classes-and-configs-part-3-467cテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol