Vite vue ts tailwind テンプレート: スタイルを TailwindCSS クラスおよび構成に変換する (パート 1)
11371 ワード
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
を置き換えます
<オール>
#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 プロパティをクラスに置き換えます'
リンク
-
<リ> https://tailwindcss.com/docs/just-in-time-mode
<リ> https://tailwindcss.com/docs/text-color#text-colors
<リ> https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
<リ> https://tailwindcss.com/docs/configuration#theme
<リ> https://tailwindcss.com/docs/font-family#customizing
<リ> https://tailwindcss.com/docs/functions-and-directives#apply
<リ> https://tailwindcss.com/docs/font-smoothing
<リ> https://tailwindcss.com/docs/customizing-colors#extending-the-defaults
<リ> https://tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support
<リ> https://tailwindcss.com/docs/margin
<リ> https://tailwindcss.com/docs/margin#customizing
計画
imomaliev / vue-ts-tailwind
Vite + Vue + TypeScript + TailwindCSS テンプレート
Reference
この問題について(Vite vue ts tailwind テンプレート: スタイルを TailwindCSS クラスおよび構成に変換する (パート 1)), 我々は、より多くの情報をここで見つけました https://dev.to/imomaliev/vite-vue-ts-tailwind-template-convert-styles-to-tailwindcss-classes-and-configs-part-1-1mljテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol