Tailwindcss 使用 normalize.css 来当作初始化样式，和 Bootstrap 一样，但它不像 Bootstrap 会帮你加一些小间距，简单来说就是几乎什麽都要手动建造，妈～原来我在组装法拉利！不过官方还是有出几个小插件，方便我们使用，这未来再说。

断点

今天威尔猪来看看断点设定，Tailwind 身为现代化 CSS 框架一份子，肯定需要能使用简单的设定，来符合各项专案的需求，否则怎麽服众，在座的各位一秒可都是几十万上下，哪有闲情逸致在那慢慢耗，Time is money, okay ?

先看看 Tailwind 预设会自动响应的五个断点：

预设断点的 class 写法就是：sm:、md:、lg:、xl:、2xl:

假设我们一般情况下背景色为白色，要在宽度 768px 以上时，改变我们的背景色，就是将 class 写为：class="bg-white md:bg-gray-900"，至於颜色後面的数值代表什麽，之後会再做说明。

威尔猪来比较一下 Tailwind 和 Bootstrap 的断点：

另外要注意的是 Bootstrap 的 container 会比断点小一点，但在 Tailwind 里，预设 container 和断点的宽度是一样的。

没错，断点的范围和 Bootstrap 不太一样，我的老天鹅啊，这让只有金鱼脑的威尔猪是要怎麽记得住，你们这些开发者难道就不能统一一下吗？好在它们都可以自定义断点，同学们应该知道 Bootstrap 要到 SCSS 里去修改，而 Tailwind 当然就是要到设定档 tailwind.config.js ，这次咱们就将 Tailwind 的断点修改为 Bootstrap 预设的断点吧，Let’s Go ~

这时咱们必须要叫出伟大的设定档 tailwind.config.js，拜托千不要傻傻的在 CSS 自己设定 Media Query，除了让 CSS 变肥外，你的主管应该会出现在你萤幕的倒影里，然後请你去会议室喝茶喝到饱。

文件 theme 的部分，就是可以依据专案来自定义各种项目，例如：颜色、文字、间距、断点等。而里面的 screens，就是修改断点设定的地方，下面这方式可以直接覆盖 Tailwind 预设的断点：

// tailwind.config.js

module.exports = {
    ...
    theme: {
        screens: {
            'sm': '576px',
            'md': '768px',
            'lg': '992px',
            'xl': '1200px',
            '2xl': '1400px',
        },
        ...
    },
    ...
}

好了，现在咱们的断点就跟 Bootstrap 一样了。

扩充断点

那假设威尔猪并不想修改 Tailwind 预设的断点，只是想增加新的断点怎麽办？这是个好问题，如果是新增更大视窗断点，最简洁的办法就是在 theme 底下加入 extend，然後在 extend 下直接写入 screens 要新增的断点，如下:

// tailwind.config.js

module.exports = {
    ...
    theme: {
        ... ,
        extend: {
            screens: {
                '3xl': '1600px',
                '4xl': '2000px',
            },
            ...
        },
    },
    ...
}

这边和上面覆盖的方式不同，是直接将 screens 写在 extend 里面，这样编译时 Tailwind 就会知道要将扩充的断点加在预设的断点底下，并不会引起冲突。那如果是要新增更小的断点怎办？威尔猪只能说，目前只能用覆盖的方式来操作，毕竟现在框架都是 手机版优先，编译出来的 CSS 是从小到大排列，如果是写在 extend 里面，编译後最小尺寸写在最下方，会打架的。

// tailwind.config.js

module.exports = {
    ...
    theme: {
        screens: {
            'xs': '480px',
            'sm': '640px',
            'md': '768px',
            ...
        },
        ...
    },
    ...
}

记得预设的尺寸也要写入，不然 Tailwind 会以为你其它尺寸都不要，编译时就将它删了。

最大宽度断点

如果专案是 桌机版优先，Tailwind 当然也可以让尺寸从大排到小：

// tailwind.config.js

module.exports = {
    ...
    theme: {
        screens: {
            '2xl': {'max': '1535px'},
            'xl': {'max': '1279px'},
            'lg': {'max': '1023px'},
            'md': {'max': '767px'},
            'sm': {'max': '639px'},
            ...
        },
        ...
    },
    ...
}

区间断点

当然想写一个范围区间也可以，只是威尔猪通常很少这样做：

// tailwind.config.js

module.exports = {
    ...
    theme: {
        screens: {
            'sm': {'min': '640px', 'max': '767px'},
            'md': {'min': '768px', 'max': '1023px'},
            'lg': {'min': '1024px', 'max': '1279px'},
            'xl': {'min': '1280px', 'max': '1535px'},
            '2xl': {'min': '1536px'},
            ...
        },
        ...
    },
    ...
}

另外，前面属性的部分也是可以自定义名称的，例如：‘md’ 可以改成 ‘pad’，诸如此类，当然 class就要命名为： pad:。

// tailwind.config.js

module.exports = {
    ...
    theme: {
        screens: {
            'pad': '768px',
            'laptop': '1024px',
            'desktop': '1440px',
        },
        ...
    },
    ...
}

以上的断点设定是威尔猪觉得比较会用到的，Taiwind 还有一些威尔猪比较不会用到的断点方式，例如多范围断点等，有兴趣的同学可自行上官网查看，咱们明天见。