スマホサイズとそれ以外とで表示する画像を変える

<img class="sm:hidden" src="img/sp.jpg">
<img class="hidden sm:block" src="img/pc.jpg">

sm: はスモールサイズのときではなく min-width: 640px なので「スモールサイズより大きい場合」の意味。

なので、上の画像がスモールサイズ用で、スモールサイズより上の横幅でhiddenにしている。

スマホサイズでは改行タグを無効にする

<p class="text-left sm:text-center">つけペンを始めてみたかった方にはもちろん、<br class="hidden sm:block">プレゼント用にもおすすめの商品です。</p>

スマホサイズでは左揃え、それ以外ではセンター揃えにして、センター揃えのときにだけ文章の途中に改行を入れる例です。

センター揃えで区切りのいいところで改行する

<h2 class="text-3xl text-center"><span class="inline-block">レスポンシブでも</span><span class="inline-block">見出しの改行位置を</span><span class="inline-block">調整して表示できます</span></h2>

ウィンドウの横幅に合わせて区切りのいいところで改行させる例です。

コードの順番と表示の順番とを逆にする

<div class="sm:flex sm:flex-wrap">
<div class="sm:w-1/2 sm:order-last">
... ブロック1 ...
</div>
<div class="sm:w-1/2">
... ブロック2 ...
</div>
</div>

flexboxで2つのブロックを横並びにした場合の例。ブロック1に sm:order-last を指定することで、「スモールサイズより大きい場合」に表示順が最後になるよう設定している。

SVGに対するスタイル設定

<svg class=" w-48 lg:w-60 fill-current text-red-900 opacity-70" viewBox="0 0 245 66" xmlns="<http://www.w3.org/2000/svg>">…</svg>

SVGの塗りつぶしの色を設定するには fill-current text-red-900 のように fill-current + テキスト色で指定する。

塗りではなく線の場合は stroke-current text-purple-500 のように指定。線幅は stroke-0 / stroke-1 ／ stroke-2 で指定できる。

横幅や透明度の指定もできる。