(4) Tailwind CSS 響應式與container容器

發表於 更新於 分類於
介紹 tailwind 響應式與container容器設計

斷點設計

Tailwind 是響應式設計是手機優先，從手機版寫到桌機版，使用 min-width 的寫法

1
2
3
4
5
// 數字由小往大撰寫
@media (min-width: 768px) {
}
@media (min-width: 1024px) {
}
  • tailwind 斷點
斷點名稱 最大寬度（px） 描述
sm 640px 小尺寸設備（手機）
md 768px 中尺寸設備（平板）
lg 1024px 大尺寸設備（小型桌面）
xl 1280px 超大尺寸設備（桌面）
2xl 1536px 超超大尺寸設備（桌面）
  • 使用方式

斷點:樣式

1
<img class="w-16 md:w-32 md:h-12 lg:w-48" src="..." />

客製化斷點尺寸

在 tailwind 裡客製化斷點尺寸很簡單，只要設定 srceens 的值即可

  1. 擴充 screens 的值，寫在 extend 裡。
1
2
3
4
5
6
7
8
// tailwind.config.js
theme: {
  extend: {
    screens: {
      '3xl': '1600px',
    },
  },
},
  1. 覆蓋原有的斷點，寫在 theme 裡。
1
2
3
4
5
6
7
8
// tailwind.config.js
theme: {
  screens: {
    'sm': '576px',
    'md': '960px',
    'lg': '1440px',
  },
},

使用 max-width

想使用 max-width 斷點，也就是從桌機寫到手機板的話，可以這樣設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
theme: {
  screens: {
    '2xl': {'max': '1535px'},
    // => @media (max-width: 1535px) { ... }

    'xl': {'max': '1279px'},
    // => @media (max-width: 1279px) { ... }

    'lg': {'max': '1023px'},
    // => @media (max-width: 1023px) { ... }

    'md': {'max': '767px'},
    // => @media (max-width: 767px) { ... }

    'sm': {'max': '639px'},
    // => @media (max-width: 639px) { ... }
  }
}

container 設定

在 theme 裡可以設定 container 為 center 來置中 container，並設定 x 軸的 padding，確保 container 在手機版會在兩邊保有空間。

1
2
3
4
5
6
7
// tailwind.config.js
theme: {
  container: {
    center: true,
    padding: '12px',
  },
},

RWD 格線系統設計

當我們想要利用 Tailwind padding 去做出格線系統時：

1
2
3
4
5
6
<div class="container mx-auto px-3">
  <div class="flex flex-wrap -mx-3">
    <div class="w-1/2 px-3"></div>
    <div class="w-1/2 px-3"></div>
  </div>
</div>

不過 Tailwind 文件中有提供 container 預設置中與水平 padding 的作法，我們就可以透過在 tailwind.config.js 設定 container 來省去每次撰寫的 mx-auto 和 px-3。

1
2
3
4
5
6
7
8
9
10
// 在 theme 物件中新增 container 的設定
module.exports = {
  content: ["./app/**/*.{html,ejs}"],
  theme: {
    container: {
      center: true,
      padding: "12px",
    },
  },
};