Vite vue ts tailwind テンプレート: スタイルを TailwindCSS クラスおよび構成に変換する (パート 1)

11371 ワード
tailwindcss vue vite テキストリンク

jit モードを有効にする

聞いたことがない場合、TailwindCSS 2.1+ には jit モードがあります.ビルド時間を短縮し、TailwindCSS のユーティリティ ファースト アプローチを次のレベルに引き上げるいくつかの追加機能を可能にします

jit を有効にするのはとても良い simple

<オール> <リ>

tailwind.config.js を更新

+  mode: 'jit',

  • git add -u

  • git commit -m 'tailwindcss jit を有効にする'

    • 既存のスタイルを src/App.vue の TailwindCSS クラスに置き換えます

    font-family を置き換えます

    <オール>
  • 最初の CSS プロパティは、#app スタイル内の font-family です. TailwindCSS プロジェクトの font-family を設定するには、tailwind.config.js の fontFamily セクションで theme 構成を使用します.
    • <リ>

    コードを更新する

    diff --git a/src/App.vue b/src/App.vue
index 1963bd4..9b68502 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,6 @@ export default defineComponent({

 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
diff --git a/tailwind.config.js b/tailwind.config.js
index 1858089..4d6d6e7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,6 +2,9 @@ module.exports = {
   purge: ['./index.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
   darkMode: false, // or 'media' or 'class'
   theme: {
+    fontFamily: {
+      sans: ['Avenir', 'Helvetica', 'Arial', 'sans-serif'],
+    },
     extend: {},
   },
   variants: {

  • git add -u

  • git commit -m '追い風のテーマの一部としてフォントを設定'

    • -webkit-font-smoothing と -moz-osx-font-smoothing を置き換えます

    <オール>
  • 次のプロパティは -webkit-font-smoothing と -moz-osx-font-smoothing です.これらのプロパティには、すでに a utility class があります.したがって、@apply ディレクティブで使用します.
    • <リ>

    コードを更新する

    diff --git a/src/App.vue b/src/App.vue
index 9b68502..67fbaa8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,8 +17,6 @@ export default defineComponent({

 <style>
 #app {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  @apply antialiased;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;

  • git add -u

  • git commit -m 'replace -webkit-font-smoothing and -moz-osx-font-smoothing with antialiased utily class'

    • text-align を置き換えます

    <オール> <リ> text-align も非常に簡単です. text alignment utilities あります. <リ>

    コードを更新する

    diff --git a/src/App.vue b/src/App.vue
index 67fbaa8..5c978a6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,6 @@ export default defineComponent({

 <style>
 #app {
-  @apply antialiased;
-  text-align: center;
+  @apply antialiased text-center;
   color: #2c3e50;
   margin-top: 60px;
 }

  • git add -u

  • git commit -m 'text-align プロパティを text-center クラスに置き換えます'

    • color を置き換えます

    <オール>
  • font-family としての一般的な color は、tailwind.config.js で設定する必要があります. jit の機能の 1 つを使用して、"Arbitrary value support" で色をインラインに設定することもできますが、この場合、テーマを extend することで、textColor に default という新しい色を追加します./コード>.
    • <リ>

    コードを更新する

    diff --git a/src/App.vue b/src/App.vue
index 5c978a6..08379dd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,6 @@ export default defineComponent({

 <style>
 #app {
-  @apply antialiased text-center;
-  color: #2c3e50;
+  @apply antialiased text-center text-default;
   margin-top: 60px;
 }
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
index c592ea4..8855955 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,11 @@ module.exports = {
     fontFamily: {
       sans: ['Avenir', 'Helvetica', 'Arial', 'sans-serif'],
     },
-    extend: {},
+    extend: {
+      textColor: {
+        default: '#2c3e50'
+      }
+    },
   },
   variants: {
     extend: {},

  • git add -u

  • git commit -m 'デフォルトの色を追加'

    • margin-top を置き換えます

    <オール>
  • これは #app の最後のスタイルです. TailwindCSS は margin クラスに rem を使用します. rem の margin-top: 60px; は 3.75 になります.デフォルトでは、この値のクラスはありません. add 1 つでも構いませんが、既に構成済みのものから最も近いものを選択することをお勧めします. mt-16 になります.
    • <リ>

    コードを更新する

    diff --git a/src/App.vue b/src/App.vue
index 08379dd..93f2f31 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,9 +14,3 @@ export default defineComponent({
   },
 })
 </script>

<style>
#app {
-  @apply antialiased text-center text-default;
-  margin-top: 60px;
+  @apply antialiased text-center text-default m-16;
}
</style>

  • git add -u

  • git commit -m 'margin-top プロパティをクラスに置き換えます'

    • リンク

    計画

    imomaliev / vue-ts-tailwind

    Vite + Vue + TypeScript + TailwindCSS テンプレート

    サーバーレス フレームワークで NestJS アプリをデプロイするときに .zip ファイル内に必要なファイル サーバーレス フレームワークで NestJS アプリをデプロイするときに .zip ファイル内で必要なファイル
    先週学んだこと: JavaScript 条件