响应式布局

知识点

• 响应式布局的使用 - Responsive Layout CSS

官网

https://tailwindcss.com/docs/breakpoints

实战演习

<!-- 响应式设计 -->
<div class="w-20 h-20 bg-yellow-500"></div>
<div class="w-20 h-20 bg-yellow-500 sm:bg-bootstrap_primary md:bg-bootstrap_success lg:bg-bootstrap_secondary xl:bg-bootstrap_danger 2xl:bg-bootstrap_info"></div>
<!-- 字体响应式 -->
<div>小马爱学习</div>
<div class="text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl 2xl:text-komabig">小马爱学习</div>
<!-- 响应式对齐 -->
<div class="text-3xl">我爱TailwindCSS</div>
<div class="flex justify-start lg:justify-center 2xl:justify-end text-3xl">我爱TailwindCSS</div>

课程文件

https://github.com/komavideo/LearnTailwindCSS

小马视频频道

http://komavideo.com

小马部落

https://discord.gg/VSKw72P