Tailwind CSS を使い始める

CSSフレームワークですが全然使った事がなかったので

CDNを使用する例

Play CDN - Tailwind CSS
https://tailwindcss.com/docs/installation/play-cdn
より

HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>

Bloggerの場合

<script src='https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4'/>

カスタムCSS追加の例

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <style type="text/tailwindcss">
      @theme {
        --color-clifford: #da373d;
      }
    </style>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline text-clifford">
      Hello world!
    </h1>
  </body>
</html>

この場合、h1はクラスに追加した text-clifford の文字色になります

わけがわからんね