说一说你不了解的Tailwind CSS响应式设计~

导语

响应式相信大家都不陌生，就是使用css的媒体查询设计，进行不同尺寸，显示不同效果，但是Tailwind CSS的响应式设计使用起来会更加爽，更加快捷方便，到底怎么搞呢？我们一起来探讨一下。

简介

Tailwind中的每个实用程序类都可以有条件地应用于不同的断点，这使得轻松构建复杂的响应式接口变得轻松，而无需离开HTML。 默认情况下，Tailwind提供了四个断点，也就是分别对应移动端，横屏，平板，桌面端。当然你也可以自定义断点。对应断点相应的是最小宽度为界。

screens: {
    sm: '640px',
    //@media (min-width: 640px) { /* ... */ }

    md: '768px',
    //@media (min-width: 768px) { /* ... */ }

    lg: '1024px',
    //@media (min-width: 1024px) { /* ... */ }

    xl: '1280px',
    //@media (min-width: 1280px) { /* ... */ }
},

简单使用

使用起来当然非常简单，省去了繁杂的过程，直接对应尺寸显示的样式即可，不加限制则全尺寸显示一样的效果。

默认情况下，Tailwind使用移动优先断点系统，类似于您可能在Bootstrap或Foundation中使用的