Tailwind CSS - 螢幕

---

---

Tailwind CSS 螢幕允許您為專案指定預設斷點。

在 theme.screens 中設定專案的斷點。鍵成為響應式修飾符（例如 md），值設定每個斷點的最小寬度。

/** @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 鍵下新增自定義螢幕來替換預設斷點。未覆蓋的預設值將丟失。

/** @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) { ... }
    },
    }
}

覆蓋單個螢幕

透過在“theme.extend”下新增自定義值來覆蓋單個螢幕大小。這會替換預設值，同時保持順序。

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

新增更大的斷點

您可以使用“extend”鍵輕鬆新增更大的斷點。它會新增到列表的末尾

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

新增更小的斷點

如果要新增一個額外的較小斷點，則不能使用 extend，因為較小斷點將新增到斷點列表的末尾，並且斷點需要按從小到大的順序排序才能與最小寬度斷點系統一起按預期工作。

const defaultTheme = require('tailwindcss/defaultTheme')

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

使用自定義螢幕名稱

您還可以為自定義螢幕選擇自己的名稱。這將在響應式修飾符中使用。

/** @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”鍵的物件。確保將最大寬度斷點從大到小列出，以便它們能夠正常工作。

/** @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 和 max 鍵。

/** @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) { ... }
    },
    }
}

多範圍斷點

如果希望斷點在多個範圍內工作，您可以輕鬆地透過使用單個定義來覆蓋不同的尺寸。

/** @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”鍵。它允許您完全按照您想要的方式編寫查詢。

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