0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Tailwind CSS Layout(レイアウト)に触れてみる。

Posted at

Container

<div>
    <h1>Tailwind CSS</h1>
    <div class="container bg-gray-300 border-black">ABC</div>
</div>

スクリーンショット 2022-03-30 14.39.54.png
mx-autoで中央配置にできます。

<div>
    <h1>Tailwind CSS</h1>
    <div class="container bg-gray-300 border-black mx-auto">ABC</div>
</div>

スクリーンショット 2022-03-30 14.41.16.png
px-{size}で水平方向のパディングを追加

<div>
    <h1>Tailwind CSS</h1>
    <div class="container bg-gray-300 border-black mx-auto px-8">ABC</div>
  </div>

スクリーンショット 2022-03-30 14.50.45.png

Box Decoration

<div>
    <h1>Tailwind CSS</h1>
    <div
      class="box-decoration-slice bg-gradient-to-r from-blue-800 to-yellow-500 text-white px-2"
    >ABC
    </div>
</div>

スクリーンショット 2022-03-30 15.14.37.png
box-decoration-sliceで連続したフラグメントであるかのようにレンダリング。spanで個別にレンダリングさせることも。

<div>
    <h1>Tailwind CSS</h1>
    <span
      class="box-decoration-slice bg-gradient-to-r from-blue-800 to-yellow-500 text-white px-2"
    >
      ABCDEFGHI<br />JKLMNOPQR
    </span>
</div>

スクリーンショット 2022-03-30 15.29.25.png
spanで個別にレンダリングさせcloneで同じデザインをレンダリング。

<div>
    <h1>Tailwind CSS</h1>
    <span
      class="box-decoration-clone bg-gradient-to-r from-blue-800 to-yellow-500 text-white px-2"
    >
      ABCDEFGHI<br />JKLMNOPQR
    </span>
</div>

スクリーンショット 2022-03-30 15.34.42.png
<div>のクラスに枠の外側(マージン)mxmyとコンテンツと枠の中間(パディング)pxpyで余白の調整。borderをカラー指定してわかりやすく表示。

<div class="mx-2 my-2 px-4 py-2 border-2 border-blue-800">
    <h1>Tailwind CSS</h1>
    <span
      class="box-decoration-clone bg-gradient-to-r from-blue-800 to-yellow-500 text-white px-2"
    >
      ABCDEFGHI<br />JKLMNOPQR
    </span>
  </div>

スクリーンショット 2022-03-30 17.19.58.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?