Tailwind教程之3 - 间距及边框

屏幕尺寸

在页面的顶级元素，我们需要定义自己想要使用的屏幕尺寸。在tailwind中，已经给定义好了一个默认类：container. 在这个类中，针对不同尺寸屏幕下页面最大占据的屏幕尺寸，已经给定了各种自定义设置：

这样，在定义顶级元素的时候，只要使用container这个类就可以了，其中的mx-auto是为了让容器居中：

markup

<div class="container mx-auto">
  <!-- ... -->
</div>

如果想要在特定的屏幕尺寸下居中，可以这样：

markup

<div class="container md:mx-auto">
  <!-- ... -->
</div>

如果想要container默认就居中，同时针对不同尺寸，增加不同padding的话，则需要更改tailwind.config.js:

JavaScript

module.exports = {
  theme: {
    container: {
      center: true,
    },
    padding: {
      DEFAULT: '1rem',
      sm: '2rem',
      lg: '4rem',
      xl: '5rem',
      '2xl': '6rem',
    },
  },
}

高和宽

• h-10
• w-2
• w-full: full width

页面宽度

• max-w-md
• mx-auto

间距

https://tailwindcss.com/docs/padding

padding:

• p-0 padding: 0px;
• px-0 padding-left: 0px;
• padding-right: 0px;
• py-0 padding-top: 0px;
• padding-bottom: 0px;
• pt-0 padding-top: 0px;
• pr-0 padding-right: 0px;
• pb-0 padding-bottom: 0px;
• pl-0 padding-left: 0px;

margin:

• mt-2: margin top with 2

边框

• .border: all borders
• .border-t: top
• .border-b: bottom
• .border-l: border left
• .border-r: border right

比如：

css

class="font-bold mt-12 pb-2 border-b border-gray-200"

行间距

• leading-loose: 最大间距
• leading-none: 无间距
• leading-tight: 介于以上两者之间