一套代码搞定移动端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下：

使用就是如此简单，下面就是结合文档开始撸页面了~