本篇開箱是TailwindCSS預覽工具以及針對Tailwind CSS斷點設定擋調整

由於前兩篇是介紹WindowResize時要抓取的一些行為，這需求都與設計RWD時有關，但其實除了用WindowResize方法，大部分都可以只靠CSS就能處理版面不同的問題，所以今天就順勢介紹TailwindCSS 設定Responsive魔法吧！

相關系列
開箱6:偵測螢幕寬度～useWindowSize範例應用
開箱7:偵測元素寬度～useResizeObserver範例應用

介紹

目前最新版本 V3.3.3

官網
https://tailwindcss.com/

安裝

https://tailwindcss.com/docs/installation
如果您在引用css上會出現Unknown at rule @tailwind
可以在VSCode 安裝 PostCSS Language Support 套件就可以解決

Tailwind Play(即時預覽Tailwind CSS畫面）

https://play.tailwindcss.com/
開啟瀏覽器立即就可使用tailwind
支援智能提示／可產生分享連結

css-to-tailwind

身為剛踏入Tailwind新手們，還不熟悉Tailwind的CSS名稱，為了快速將你原本的css轉為tailwind class，可以試試這個

https://transform.tools/css-to-tailwind
開啟瀏覽器立即就可轉為tailwind Clas
右上角setting可以改Tailwind configuration

介紹完工具後，直接進入今日主題(只介紹container以及breakpoint設定)

設定檔調整

首先TailwindCSS Responsive Design 核心為
斷點名稱/斷點 | Media Query CSS| max-width CSS|
------------- | -------------------------- |
None | |width: 100%;
sm (640px)| @media (min-width: 640px) { ... } | max-width: 640px;
md (768px)| @media (min-width: 768px) { ... } | max-width: 768px;
lg (1024px)| @media (min-width: 1024px) { ... } | max-width: 1024px;
xl (1280px)| @media (min-width: 1280px) { ... } | max-width: 1280px;
2xl (1536px)| @media (min-width: 1536px) { ... } | max-width: 1536px;

如果想要修改這些預測值，就請看下方介紹

container

官網說明 https://tailwindcss.com/docs/container

• container--margin／padding
  當套用TailwindCSS的container時，本身沒有居中，必須要手動加上mx-auto

 <div class="container mx-auto">
   <!-- ... -->
 </div>

也沒有padding，必須要手動加上

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

但是依照各專案需求可能有固定的樣貌，所以假設你想要container固定需要居中，就可以直接在設定檔中加入

module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

用了這個方法就不用手動再加上mx-auto了！！

如果是要固定加上padding的話，就可以在設定檔中加入

module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}

也可以根據斷點調整padding

...
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
...

• container--max-width

官網說明 https://tailwindcss.com/docs/max-width

因為TailwindCSS預設的最大寬度為100%，所以我們要修改的話，可以手動加上max-w-[寬度]
max-width詳細可以設定的class可以看官網說明

 <div class="container max-w-[640px]">
   <!-- ... -->
 </div>

若不想手動可以使用插件改設定檔案為以下

module.exports = {
  content: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    ...
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.container': {
          maxWidth: '80%', //依照公司專案調整
          '@screen sm': {
            maxWidth: '80%'//依照公司專案調整
          },
          '@screen md': {
            maxWidth: '80%'//依照公司專案調整
          },
          '@screen lg': {
            maxWidth: '1440px'//依照公司專案調整
          },
          '@screen xl': {
            maxWidth: '1440px'//依照公司專案調整
          }
        }
      });
    }
  ],
};

調整完後，還可調整螢幕預設的斷點

Customizing Screens

官方說明 https://tailwindcss.com/docs/screens#adding-larger-breakpoints

目前TailwindCSS預設的斷點名稱為sm/md/lg/xl/2x，寬度為以下 ▼

module.exports = {
  theme: {
    screens: {
      'sm': '640px', // 螢幕寬度在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下
這樣的修改方式是會將原本的xl,2xl刪除

module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

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

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

• 添加較大的斷點

▼ 如果只想覆蓋某一種size或者增加一種size(比2xl大），是使用theme.extend

module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '992px', // 因為原本官方就有這個斷點名稱，這樣寫是只覆蓋'lg'
        '3xl': '1600px', // 這是添加size(比2xl大）
      },
    },
  },
}

• 添加較小的斷點

▼ 若是要添加小斷點，則不能使用extend，而是改為screens以下方式

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },
}

• 修改斷點名稱（預設使用的是sm/md/lg...）

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

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

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

▼ 使用起來會變成這樣

• 進階配置Media Query

因為TailwindCSS預設情況下，是由手機版先設計的，所以斷點是採取最小寬度@media (min-width:...)若想要修改為最大寬度@media (max-width:...，修改為以下

module.exports = {
  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) { ... }
    }
  }
}

（記得順序要改2xl >>> sm)

• 單一斷點

官網說明 https://tailwindcss.com/docs/responsive-design#using-custom-breakpoints

最後，如果你今天設定擋為預設還是以最小寬度@media (min-width:...)手機版先設計起，但是你有個元素就是只想要「當 螢幕範圍<=XXXpx時」（好任性），偏偏寫sm:...就是螢幕寬度在640px(含)以上時，所以還有一個class可以使用就是max-*

那我們明天再見了～