現在の Tailwind CSS ブレークポイントは何ですか?

3513 ワード
tailwindcss css テキストリンク
サイトを設計し、モバイル (デフォルト)、 sm: 、 md: 、およびそれ以降の各ブレークポイントから開始して適用する Tailwind CSS クラスをいじっているとき、ブラウザがブレークポイントが何であるかを明確に伝えることが非常に便利です.現在活動中.





次の HTML で部分/フラグメント/コンポーネントを作成します.これは sticky z-50 top-2 left-2 クラスを使用して、小さなバッジが常に左上隅に表示されるようにします.

<div class="sticky z-50 top-2 left-2 max-w-xs text-gray-900 bg-gray-50">
  <p class="p-2 text-xs">
    Breakpoint:
    <span class="sm:hidden">mobile</span>
    <span class="hidden sm:inline md:hidden">sm</span>
    <span class="hidden md:inline lg:hidden">md</span>
    <span class="hidden lg:inline xl:hidden">lg</span>
    <span class="hidden xl:inline 2xl:hidden">xl</span>
    <span class="hidden 2xl:inline 3xl:hidden">2xl</span>
    <span class="hidden 3xl:inline 4xl:hidden">3xl</span>
    <span class="hidden 4xl:inline">4xl+</span>
  <p>
</div>


次に、最も外側のレイアウトで、現在のページのパラメーターに dev=1 または類似のものが含まれている場合、この部分/コンポーネントを <body> タグの上部近くに挿入します.

たとえば、Ruby on Rails では、以下を application.html.erb 内に配置できます.

<%= render "shared/sticky_panel" if params[:dev].presence %>


試してみませんか?現在、https://app.rcrdshp.com/?dev=1 で公開されています.
Androidで録音機能を実現
Laravel 8.x カーソルベースのページネーションの例