Write the Code. Change the World.

6月 25

安装好了 tailwindcss 以及相关的插件后。也安装一下 vscode 对应的插件。常规网站,顶部,底部一般都是公用的,我们可以提取出来,作为 layout。然后是自适应问题,tailwindcss 已居右自适应的特性。我们再扩展一下啊,支持得更宽一点。现在电脑,分辨率也都已经很高了。支持的多一点,体验也会好一些。然后正如 bootstrap 框架一样。container 容器,我们还是要用的。tailwindcss 默认的 container 是不居中的,我们可以在插件中配置一下。默认就居住。其实居中和 bootstrap 一样,都是使用 margin:auto 来搞定的。

那么开始吧。

配置断点和容器

编辑 tailwind.config, 先扩充宽度。也可以更多点。

  …
  theme: {
    extend: {},
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1782px',
    }
  },

然后设置容器,让其默认就居中。相同的位置,增加 container 配置。其中,centertrue 时,container 容器默认就居中,这个和 bootstrap 一样了。然后 padding 设置的是每个节点下的内边距。

  …
  theme: {
    extend: {},
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
        '3xl': '6rem',
      },
    },
    …

继续阅读