[Tailwind] 客製化-斷點及容器

斷點、容器基本介紹

斷點（Breakpoint）

Tailwind身為現代化的utility-first框架，當然有提供斷點的設計。並且在每個utilities都支援斷點！
舉例來說我們可以使用<img class="w-16 md:w-32 lg:w-48" src="..."> 去設計一個圖片在不同的裝置尺寸具有不同的寬度。Tailwind預設的斷點如下：

Breakpoint prefix	Minimum width	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

官方文件提到，也可以透過tailwind.config.js去自定義斷點,

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default  {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

這邊screens內的屬性名稱即為斷點的時候預設的名稱（例如預設的md,lg等等）

並且也支援JIT去指定特殊的斷點（可能是在超小尺寸例如320px-iphone SE1的時候的調整。撰寫方式如下：

index.html
<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  <!-- ... -->
</div>

更多的斷點客製化可以參考下方的客製化斷點(breakpoint)

容器（Container）

我們要使用tailwind製作container容器的時候，通常需要根據裝置寬度，去設定container的實際寬度。

另外在設計container的時候，通常會需要讓容器在畫面正中間，所以需要使用到margin-left:auto + margin-right:auto的語法 (mx-auto) tailwind預設已經提供了container 這個class,只是如果沒有額外設定，則只會包含容器的寬度這個設定，而沒有置中於父層

Bootstrap5 Container
Tailwind Container

Bootstrap5	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

Breakpoint	Properties
None	width: 100%;
sm (640px)	max-width: 640px;
md (768px)	max-width: 768px;
lg (1024px)	max-width: 1024px;
xl (1280px)	max-width: 1280px;
2xl (1536px)	max-width: 1536px;

通常為了不讓邊線貼齊，我們還會在container左右設定一個padding,寬度通常會是gutter-x的一半（參考bootstrap格線的設計）。
我們可以使用px-* 去製造水平方向的左右padding。所以總結來說，我們在使用container容器的時候，通常會長得像下方的程式碼這樣：

index.html
<div class="container mx-auto px-4">
  <!-- ... -->
</div>

當然容器也支援許多的客製化，例如預設container即包含mx-auto以及左右padding，這部分請參考下方的客製化容器

客製化斷點

feel free to have as few or as many screens as you want, naming them in whatever way you’d prefer for your project.

官方文件提到，如同其他客製化選項，我們可以在tailwind.config.js內

完整取代預設的斷點
基於預設的斷點，額外新增別的斷點
只是想要替換掉預設斷點的名稱

Tailwind預設的斷點如下

Breakpoint prefix	Minimum width	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

預設的斷點所對應的tailwind.config.js如下：

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    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) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

完整取代預設的斷點

如果我們希望取代預設的斷點，完全使用我們自己設計的斷點，則如同其他的客製化方式，我們會在theme物件下新增一個screens物件**（screens不可自定義名稱）**範例如下：

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

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

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

完整取代預設斷點

在取代掉預設的斷點時，因為我們自定義的斷點並沒有包含xl,所以使用xl:text-xl是不會有任何效果的

替換掉特定預設斷點的值

如果我們只是希望可以取代掉預設的特定幾個斷點，其他的斷點希望可以保留預設的設定，那我們就不應該使用theme去調整，而是要在theme下面的extend去調整screens，設定如下：

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default = {
  theme: {
    extend: {
      screens: {
        'lg': '992px',
        // => @media (min-width: 992px) { ... }
      },
    },
  },
}

上述範例僅取代lg斷點預設值

以上設定則會只有lg一個斷點被改為992px，其他如sm、md、xl、2xl的斷點仍然會同預設值，依序為640px、768px、1280px、1536px。

基於預設的斷點，額外新增別的斷點

如果想要再額外擴充更大的斷點時，同樣撰寫在theme下的extend中

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
        // => @media (min-width: 1600px) { ... }
      },
    },
  },
}

擴充新斷點

因為3xl並非tailwind預設的斷點，而且我們是撰寫在extend內，故不會影響tailwind預設斷點，另外還可以增加我們自己設定的3xl斷點名稱之後就可以使用3xl:text-blue-100這種指定斷點行為的語法了

擴充比預設值更小的斷點！

要擴充比預設值更小的斷點時，不可以使用上述方式！！因為extend內撰寫的斷點，在編譯的時候會產生在預設的斷點以後，所以會被其他的斷點給取代掉，沒有辦法正確運作。相對的我們要使用theme的完整取代方式（即第一種方法）再搭配js的展開運算符去帶入預設值得斷點。範例如下：

tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

export default {
  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },
  plugins: [],
}

自定義斷點名稱

我們也不一定要使用sm，md，lg等等預設的名稱，可以自定義自己的斷點名稱，如同官方文件所提到的，Feel free to have as few or as many screens as you want, naming them in whatever way you’d prefer for your project.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

將媒體查詢（@media）改為使用max-width設定斷點

因為tailwind是mobile-first,斷點的設計都是使用min-widht去撰寫的，如果我們今天想要將斷點改成max-width，則需要使用以下的方法

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  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) { ... }
    }
  }
}

為何不用extend

我們這邊使用取代的方法，因為不會同時具有min-width跟max-width的斷點，我們在設計的時候只會採取其中一種。所以使用theme去直接取代即可。

其他未提及部分

關於斷點的客製化，還有其他如固定range中的特殊斷點（min-width:640px && max-width:767px)、完全自定義media query等等，可以參考官方文件

客製化容器

tailwind預設有一個container的class,預設的設定只有設定寬度而已，預設值如下：

Breakpoint	Properties
None	width: 100%;
sm (640px)	max-width: 640px;
md (768px)	max-width: 768px;
lg (1024px)	max-width: 1024px;
xl (1280px)	max-width: 1280px;
2xl (1536px)	max-width: 1536px;

容器的水平置中

因為預設狀態下，並不會水平置中。我們可以每次在使用container的時候都加上mx-auto & px-* 或是也可以直接在tailwind.config.js中設定預設值。預設值的修改方式如下：

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
};

需要使用extend嗎？

官方文件有提供，我們只需要直接在theme下撰寫container（不是在extend下設定） center這個屬性代表是否預設要置中如果設定為true,則會在.container下加上margin-left:auto & margin-right:auto

設定固定值padding-x

而padding這個屬性則代表容器”左右“ 的內距，只會產生x軸方向的，y軸方向不會有影響。另外可以利用物件方式撰寫，每個斷點的時候個別設定padding-x要是多少如下。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      center: true,
      padding:'30px'
    },
  },
};

根據斷點設定padding-x

可以使用物件的方式去設定在不同斷點下的padding-x

tailwind.config.js設定
viewport<640px
640px≤viewport<768px
768px≤viewport≤1024px
1024px≤viewport<...

tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
      padding: {
        sm: '1rem',
        md: '2rem',
        '2md': '3rem',
      },
    },
  },
};

上方範例刻意設定了一個原本沒有的斷點2md 可以看到在一開始的時候完全沒有任何padding,因為我們並沒有設定DEFAULT的屬性接著可以看到在sm(viewport≥640px)的時候具有1rem的padding-x 在md(viewport≥768px)的時候具有2rem的padding-x 因為我們設定2md但是並不具有這個斷點，所以我們設定的3rem不會有任何作用在到達lg(viewport≥1024px)的時候，仍然會維持md的時候的設定值（2rem)

其他補充

使用tailwind實作bootstrap容器(.container)

tailwind預設的container會跟breakpoint剛剛好相同，並且會維持該寬度直到到達下一個斷點相對的，bootstrap的容器則不同

bootstrap
tailwind

Bootstrap5	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

可以看到Bootstrap的容器（以.container為例）
在sm尺寸以下的時候(viewport<576px)，會是100%寬度(max-width:100%)
代表在575px的時候.container的寬度會是575px
可是當裝置寬度到達sm尺寸(576px≤viewport<768px)的時候，會縮小到540px一直到下一個md的斷點
tailwind則是會在每個斷點都設置該斷點為最大寬度，直到下一個斷點才會更新max-width，

我們可以創建一個_base.scss的檔案，在裡面使用以下方法來設定：

_base.scss
@layer utilities{
  .l-container-fluid{
    @apply w-full max-w-screen-fhd px-3 sm:px-5 md:px-10 xl:px-20 
  }
  /* container的斷點參考bootstrap */
  .container{
    @apply w-full sm:max-w-[540px] md:max-w-[720px] lg:max-w-[920px] xl:max-w-[1140px] xxl:max-w-[1320px]
  }
}

[Tailwind] 客製化-斷點及容器

斷點、容器基本介紹​

斷點（Breakpoint）​

容器（Container）​

客製化斷點​

完整取代預設的斷點​

替換掉特定預設斷點的值​

基於預設的斷點，額外新增別的斷點​

自定義斷點名稱​

將媒體查詢（@media）改為使用max-width設定斷點​

其他未提及部分​

客製化容器​

容器的水平置中​

設定固定值padding-x​

根據斷點設定padding-x​

其他補充​