Tailwind

チートシート

tailwind.config

Get started with Tailwind CSS

Play CDN:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
  <h1 class="text-3xl font-bold underline text-clifford">
    Hello world!
  </h1>
</body>
</html>

高さ:

    tailwind.config = {
      theme: {
        extend: {
          height: {
            "112": '28rem',
          }
        }
      }
    }

ブレイクイント

TailwindCSS　ブレイクポイントの追加

ブレイクポイント	幅	CSS
sm	640ピクセル	@media (min-width: 640px) { … }
md	768ピクセル	@media (min-width: 768px) { … }
lg	1024ピクセル	@media (min-width: 1024px) { … }
xl	1280ピクセル	@media (min-width: 1280px) { … }
2xl	1536ピクセル	@media (min-width: 1536px) { … }

HTML5 レイアウト


<div>
  <header></header>
  <main></main>
  <footer></footer>
</div>

 <!doctype html>
      <head/>
  
      <body>
          <section>
              <header/>
              <nav/>
              <aside/>
              <main>
                <section/>
              </main>
              <footer/>
          </section>
      </body>
  </html>

セマンティック要素:

タグ	意味
article	独立したコンテンツを表します。例えば、ブログ記事やニュース記事など。
aside	メインコンテンツに関連する補足情報を提供します。サイドバーなどに使用されます。
details	ユーザーが表示・非表示を切り替えられる追加情報を含みます。
figcaption	figure要素内のコンテンツのキャプションを提供します。
figure	図やイラストなどの自己完結型のコンテンツを表します。
footer	セクションやページ全体のフッターを表します。著作権情報やリンクなどが含まれます。
header	セクションやページ全体のヘッダーを表します。ナビゲーションリンクやロゴなどが含まれます。
main	文書の主要な内容を表します。メインコンテンツが含まれます。
nav	ナビゲーションリンクのセクションを表します。メニューや目次などに使用されます。
section	文書の自立したセクションを表します。主題ごとに区切るために使用されます。

マルチメディア要素

タグ	意味
audio	音声コンテンツを埋め込むための要素です。
video	動画コンテンツを埋め込むための要素です。
source	audioやvideo要素の複数のメディアリソースを指定します。
track	videoやaudio要素の字幕ファイルを指定します。

フォーム要素

タグ	意味
datalist	入力候補のリストを提供します。
output	計算結果やユーザーの操作結果を表示します。
progress	タスクの進行状況を示します。
meter	既知の範囲内の測定値を示します。

Tailwind

Tailwind

tailwind.config

ブレイクイント

HTML5 レイアウト

記事

シャドウ

色