一套代码搞定移动端pc端-tailwind 学习(二)

1,801 阅读1分钟

原文我的博客:一套代码搞定移动端pc端-tailwind 学习(二) 支持原文吧!😋

上一篇博客记录如何安装tailwind,还没看的先去看看吧一套代码搞定移动端pc端-tailwind 学习(一),这篇博客我们开始学习怎么使用。

前期准备: tailwind有大量的类名,肯定是记不住的,此时,我们肯定就要借助插件来提示我们了,tailwind有 vscode的官方插件: Tailwind CSS IntelliSense

image.png

安装这个插件后,就会有提示了 image.png 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>

运行结果 image.png 可以看到,主题内容是居中的,但文字不居中 我们在文档中找到文字居中的属性 text-center,加上属性再运行

.main-content {
  @apply container mx-auto text-center
}

结果如下: image.png

还有一个响应式使用: .main-content { @apply container mx-auto text-center md:text-2xl sm:text-sm } image.png

这个在md 下 字体会大些,在sm下字体会小些 mg下: image.png sm下: image.png

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