tailwindcss 系列 Container 布局

tailwindcss 基础布局

container 实现效果如下

代码如下

    <p class="text-3xl ...">Container</p>
    <p class="text-lg mb-4">To center a container, use the .mx-auto utility:</p>

    <div class="container mx-auto bg-gray-400 h-64">
      <!-- ... -->
    </div>

使用.px-{size 给容器左右添加padding

    <p class="text-lg mb-4 mt-5">
      add horizontal padding, use the .px-{size} utilities:
    </p>

效果如下

响应式布局

    <div class="lg:container lg:mx-auto px-4 bg-gray-400 h-64">
      <!-- ... -->
    </div>