原文我的博客:一套代码搞定移动端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下:
使用就是如此简单,下面就是结合文档开始撸页面了~