自訂螢幕 - Tailwind CSS 框架

設定自訂螢幕

您在 tailwind.config.js 檔案的 theme.screens 區段中定義專案的斷點。這些金鑰會變成您的回應式修改器（例如 md:text-center），而數值則是該斷點應開始的 min-width。

預設斷點是根據常見的裝置解析度而設計

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  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 組態

tailwind.config.js

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

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

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

您未覆寫的任何預設螢幕（例如使用上述範例的 xl）將會被移除，且無法作為螢幕修改器使用。

覆寫單一螢幕

若要覆寫單一螢幕大小（例如 lg），請在 theme.extend 金鑰下新增您的自訂 screens 數值

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '992px',
        // => @media (min-width: 992px) { ... }
      },
    },
  },
}

這將會以同名的自訂 screens 數值取代預設值，而不會變更斷點的順序。

新增較大的斷點

加入較大斷點最簡單的方式是使用 extend 鍵

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  plugins: [],
}

這會將您的自訂螢幕加入預設斷點清單的尾端。

加入較小斷點

如果您想要加入較小的斷點，您無法使用 extend，因為較小的斷點會加入斷點清單的尾端，而斷點需要由小至大排序，才能配合最小寬度斷點系統預期運作。

相反地，覆寫整個 screens 鍵，重新指定預設斷點

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

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

我們在 tailwindcss/defaultTheme 公開預設主題，這樣您就不必自己維護預設斷點清單。

使用自訂螢幕名稱

您可以隨意命名您的自訂螢幕，不限於遵循 Tailwind 預設使用的 sm/md/lg/xl/2xl 慣例。

tailwind.config.js

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

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

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

您的回應式修改器將反映這些自訂螢幕名稱，因此在 HTML 中使用它們現在看起來像這樣

<div class="grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4">
  <!-- ... -->
</div>

進階設定

預設情況下，斷點為最小寬度，以鼓勵行動裝置優先的工作流程。如果您需要更進一步地控制您的媒體查詢，您也可以使用物件語法來定義它們，讓您指定明確的最小寬度和最大寬度值。

最大寬度斷點

如果您想使用最大寬度斷點而不是最小寬度，您可以將您的螢幕指定為具有max金鑰的物件

tailwind.config.js

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

請務必以遞減順序列出最大寬度斷點，以便它們如預期般互相覆寫。

固定範圍斷點

如果你希望斷點同時指定 min-width 和 max-width，請同時使用 min 和 max 鍵

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      // => @media (min-width: 640px and max-width: 767px) { ... }

      'md': {'min': '768px', 'max': '1023px'},
      // => @media (min-width: 768px and max-width: 1023px) { ... }

      'lg': {'min': '1024px', 'max': '1279px'},
      // => @media (min-width: 1024px and max-width: 1279px) { ... }

      'xl': {'min': '1280px', 'max': '1535px'},
      // => @media (min-width: 1280px and max-width: 1535px) { ... }

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

與一般最小寬度或最大寬度斷點不同，如此定義的斷點僅在視窗大小明確位於定義範圍內時才會生效。

<div class="md:text-center">
  This text will be centered on medium screens, but revert back
  to the default (left-aligned) at all other screen sizes.
</div>

多範圍斷點

有時讓單一斷點定義套用於多個範圍會很有用。

例如，假設你有一個側邊欄，並希望你的斷點基於內容區域寬度，而非整個視窗。你可以透過讓其中一個斷點在側邊欄可見並縮小內容區域時，回退到較小的斷點來模擬這個情況

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '500px',
      'md': [
        // Sidebar appears at 768px, so revert to `sm:` styles between 768px
        // and 868px, after which the main content area is wide enough again to
        // apply the `md:` styles.
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ],
      'lg': '1100px',
      'xl': '1400px',
    }
  }
}

自訂媒體查詢

如果您想要完全控制所產生的媒體查詢，請使用 raw 鍵

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'tall': { 'raw': '(min-height: 800px)' },
        // => @media (min-height: 800px) { ... }
      }
    }
  }
}

使用 raw 鍵定義的媒體查詢會照原樣輸出，而 min 和 max 鍵將會被忽略。

在此頁面上