斷點

自定義項目的默認斷點。

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

默認斷點的設置來自于常見的設備分辨率。

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

您可以自由地擁有您想要的多的屏幕，以任何您喜歡的方式為他們命名。

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

// 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 }
}

擴展默認斷點(Extending the default breakpoints)

添加額外更大斷點的最簡單方法是使用擴展鍵：(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: [],
}

如果要添加額外的小斷點，則不能使用?extend?，因為小斷點將添加到斷點列表的末尾，并且斷點需要從最小到最大排序才能按預期工作-寬度斷點系統(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.)

相反，覆蓋整個屏幕鍵，重新指定默認斷點：(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: [],
}

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

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

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

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

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

// 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'},
    },
  }
}

多范圍斷點

有時，一個斷點定義適用于多個范圍可能很有用。

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

// 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',
    }
  }
}

自定義媒體查詢

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

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

為打印設置風格

如果您需要專門為打印應用不同的風格，?raw ?選項可能特別有用。

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

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

然后，您可以使用像 ?print:text-black? 這樣的類來指定只有當有人試圖打印您正在處理的頁面時才會應用的樣式：

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