Tailwind CSS 斷點(diǎn)

斷點(diǎn)

自定義項(xiàng)目的默認(rèn)斷點(diǎn)。

您的 ?tailwind.config.js? 文件的 ?theme.screens? 部分定義您項(xiàng)目的斷點(diǎn)。鍵是您的屏幕名稱（用于 Tailwind 生成的響應(yīng)功能類變體的前綴，如 ?md:text-center?），值是 ?min-width?，該斷點(diǎn)應(yīng)該開始的地方。

默認(rèn)斷點(diǎn)的設(shè)置來自于常見的設(shè)備分辨率。

// tailwind.config.js
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) { ... }
    }
  }
}

您可以自由地?fù)碛心胍亩嗟钠聊?，以任何您喜歡的方式為他們命名。

例如，您可以使用設(shè)備名稱代替尺寸。

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

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

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

這些屏幕名稱將反映在您的功能類中，所以您的 ?text-center? 功能類現(xiàn)在看起來像這樣：

.text-center { text-align: center }

@media (min-width: 640px) {
  .tablet\:text-center { text-align: center }
}

@media (min-width: 1024px) {
  .laptop\:text-center { text-align: center }
}

@media (min-width: 1280px) {
  .desktop\:text-center { text-align: center }
}

擴(kuò)展默認(rèn)斷點(diǎn)(Extending the default breakpoints)

添加額外更大斷點(diǎn)的最簡(jiǎn)單方法是使用擴(kuò)展鍵：(The easiest way to add an additional larger breakpoint is using the extend key:)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  variants: {},
  plugins: [],
}

如果要添加額外的小斷點(diǎn)，則不能使用?extend?，因?yàn)樾帱c(diǎn)將添加到斷點(diǎn)列表的末尾，并且斷點(diǎn)需要從最小到最大排序才能按預(yù)期工作-寬度斷點(diǎn)系統(tǒng)。(If you want to add an additional small breakpoint, you can’t use ?extend ?because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system.)

相反，覆蓋整個(gè)屏幕鍵，重新指定默認(rèn)斷點(diǎn)：(Instead, override the entire ?screens ?key, re-specifying the default breakpoints:)

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

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

最大寬度斷點(diǎn)(Max-width breakpoints)

如果您想使用最大寬度斷點(diǎn)而不是最小寬度斷點(diǎn)，您可以指定您的屏幕為具有 ?max ?鍵的對(duì)象。

// tailwind.config.js
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) { ... }
    }
  }
}

與最小寬度斷點(diǎn)相比，確保以相反的順序列出它們，以便它們按照預(yù)期的方式相互覆蓋。

例如，如果有必要，您甚至可以同時(shí)用 ?min-width? 和 ?max-width? 定義創(chuàng)建斷點(diǎn)。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      'md': {'min': '768px', 'max': '1023px'},
      'lg': {'min': '1024px', 'max': '1279px'},
      'xl': {'min': '1280px', 'max': '1535px'},
      '2xl': {'min': '1536px'},
    },
  }
}

多范圍斷點(diǎn)

有時(shí)，一個(gè)斷點(diǎn)定義適用于多個(gè)范圍可能很有用。

例如，假設(shè)您有一個(gè)側(cè)邊欄，并希望您的斷點(diǎn)是基于內(nèi)容區(qū)域的寬度，而不是整個(gè)視口。您可以模擬這種情況，當(dāng)側(cè)邊欄變得可見并縮小內(nèi)容區(qū)域時(shí)，您的一個(gè)斷點(diǎn)會(huì)回到一個(gè)較小的斷點(diǎn)。

// tailwind.config.js
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',
    }
  }
}

自定義媒體查詢

如果您需要為斷點(diǎn)提供一個(gè)完全自定義的媒體查詢，您可以使用一個(gè)帶有 ?raw ?鍵的對(duì)象來實(shí)現(xiàn)。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'portrait': {'raw': '(orientation: portrait)'},
        // => @media (orientation: portrait) { ... }
      }
    }
  }
}

為打印設(shè)置風(fēng)格

如果您需要專門為打印應(yīng)用不同的風(fēng)格，?raw ?選項(xiàng)可能特別有用。

您需要做的就是在 ?theme.extend.screens? 下添加一個(gè) ?print ?屏幕：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'print': {'raw': 'print'},
        // => @media print { ... }
      }
    }
  }
}

然后，您可以使用像 ?print:text-black? 這樣的類來指定只有當(dāng)有人試圖打印您正在處理的頁面時(shí)才會(huì)應(yīng)用的樣式：

<div class="text-gray-700 print:text-black">
  <!-- ... -->
</div>