VITE VUE TS TARWAYテンプレート:スタイルをTailWindCSSクラスと設定に変換する(その2 )
4439 ワード
既存のスタイルを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' リンク
プロジェクト
イモリマリフ / VUE TS
VITE + Vue +タイプスクリプト+ TailWindCSSテンプレート
Reference
この問題について(VITE VUE TS TARWAYテンプレート:スタイルをTailWindCSSクラスと設定に変換する(その2 )), 我々は、より多くの情報をここで見つけました https://dev.to/imomaliev/vite-vue-ts-tailwind-template-convert-styles-to-tailwindcss-classes-and-configs-part-2-1fdmテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol