一套代碼搞定移動端pc端-tailwind 學習（二）

原文個人博客：一套代碼搞定移動端pc端-tailwind 學習（二） 支持原文吧！😋

上一篇博客記錄如何安裝tailwind,還沒看的先去看看吧一套代碼搞定移動端pc端-tailwind 學習（一）,這篇博客咱們開始學習怎麼使用。

前期準備： tailwind有大量的類名，確定是記不住的，此時，咱們確定就要藉助插件來提示咱們了，tailwind有 vscode的官方插件： Tailwind CSS IntelliSense

安裝這個插件後，就會有提示了 tailwind 支持使用 @apply 來像普通css的風格那樣寫。咱們寫一段文字，使用mx-auto 來居中顯示。

<template>
  <div class="main-content">一套代碼搞定移動端pc端-tailwind 學習（二）</div>
</template>

<script>
export default {}
</script>

<style >
.main-content {
  @apply container mx-auto 
}
</style>
複製代碼

運行結果 能夠看到，主題內容是居中的，但文字不居中 咱們在文檔中找到文字居中的屬性 text-center，加上屬性再運行

.main-content {
  @apply container mx-auto text-center
}
複製代碼

結果以下：

還有一個響應式使用： .main-content { @apply container mx-auto text-center md:text-2xl sm:text-sm }

這個在md 下 字體會大些，在sm下字體會小些 mg下： sm下：

使用就是如此簡單，下面就是結合文檔開始擼頁面了~