導語
響應式相信大家都不陌生，就是使用css的媒體查詢設計，進行不同尺寸，顯示不同效果，但是Tailwind CSS的響應式設計使用起來會更加爽，更加快捷方便，到底怎么搞呢？我們一起來探討一下。
簡介
Tailwind中的每個實用程序類都可以有條件地應用於不同的斷點，這使得輕松構建復雜的響應式接口變得輕松，而無需離開HTML。
默認情況下，Tailwind提供了四個斷點，也就是分別對應移動端，橫屏，平板，桌面端。當然你也可以自定義斷點。對應斷點相應的是最小寬度為界。
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) { /* ... */ }
},
簡單使用
使用起來當然非常簡單，省去了繁雜的過程，直接對應尺寸顯示的樣式即可，不加限制則全尺寸顯示一樣的效果。
默認情況下，Tailwind使用移動優先斷點系統，類似於您可能在Bootstrap或Foundation中使用的系統。
使用：只要使用前綴加上：再加上對應類名即可。
例如： md:text-gray-700
<p class="text-red-600 sm:text-yellow-300 lg:text-green-600 xl:text-blue-300">Tailwind CSS text-color測試</p>
上述一段代碼，意思是：屏幕小於640尺寸為紅色，640-1024尺寸顯示為黃色，1024-1280尺寸顯示為綠色，大於1280尺寸顯示為藍色。
這意味着未加前綴的類對所有屏幕尺寸都有效，而帶前綴的類僅在指定的斷點及以上斷點生效。
幾個小技巧
-
可以使用max-w-sm限定此網頁為移動端，在瀏覽器也只顯示小尺寸。
-
要為移動設備設計樣式，您需要使用實用程序的無前綴版本，而不是帶sm:前綴的版本。不要將其sm:視為“在小屏幕上”的含義，而應將其視為“在小斷點處”。
-
不要sm:用於定位移動設備
<!-- This will only center text on screens 640px and wider, not on small screens -->
<div class="sm:text-center"></div>
- 使用無前綴的實用程序來定位移動設備，並在較大的斷點處覆蓋它們
<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div class="text-center sm:text-left"></div>
5.通常最好先為設計實現移動布局，然后在對sm屏幕有意義的所有更改上進行分層，然后再對md屏幕等進行分層。
- 我們不必為sm斷點或xl斷點指定背景色，您只需要指定實用程序何時應開始生效，而不是何時停止。
<div class="bg-teal-500 md:bg-red-500 lg:bg-teal-500"></div>
原文地址：https://www.wjcms.net/archives/tailwindcss初體驗之響應式設計
