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

4439 ワード

tailwindcss vue vite テキストリンク

既存のスタイルをsrc / component / helloworldのTailWindCSSクラスに置き換えます。Vue

スタイルを置き換える

があるcolor インa セレクタ.新規追加textColor 前の記事でしたように.

コード更新

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 7e9abbe..efb4ee8 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -65,7 +65,7 @@ export default defineComponent({

 <style scoped>
 a {
-  color: #42b983;
+  @apply text-link;
 }

 label {
diff --git a/tailwind.config.js b/tailwind.config.js
index 8855955..eaabfc4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,7 +8,8 @@ module.exports = {
     },
     extend: {
       textColor: {
-        default: '#2c3e50'
+        default: '#2c3e50',
+        link: '#42b983'
       }
     },
   },

git add -u

git commit -m 'add link color'

スタイルをコードに置換する

最初の置換background-color . とcolor 私たちは新しい色を追加しますcode イン backgroundColor そばextend INGtheme .

その後margin 私たちは padding . 幸いにも私たちの値と一致するクラスがあります.

最後に、新しいtextColor 呼ばれるcode .

コードdiffは次のようになります

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index efb4ee8..c761112 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -68,15 +68,7 @@ a {
   @apply text-link;
 }

 code {
-  background-color: #eee;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: #304455;
+  @apply bg-code py-0.5 px-1 text-code;
 }
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
index eaabfc4..d8ca082 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,11 @@ module.exports = {
     extend: {
       textColor: {
         default: '#2c3e50',
-        link: '#42b983'
+        link: '#42b983',
+        code: '#304455',
+      },
+      backgroundColor: {
+        code: '#eeeeee',
       }
     },
   },

git add -u

git commit -m 'replace code styles'