Zenn
😸

Tailwind CSS+htmlで静的なページをつくる

2024/03/09に公開
Tailwind CSS
tech

Tailwind CSSとHTMLだけで静的なページを作成する手順をまとめました。

Tailwind CSS をプロジェクトにインストール

npm install -D tailwindcss
npx tailwindcss init

tailwind.config.js ファイルを開き、contentセクションにすべてのHTMLファイルへのパスを追加

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

以下のinput.css、index.htmlはsrc配下に設置します。

CSSファイル（例: input.css）を作成し、Tailwindのディレクティブを追加

input.css
@tailwind base;
@tailwind components;
@tailwind utilities;

HTMLを作成

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="./output.css" rel="stylesheet" />
    <title>ハロー世界</title>
  </head>
  <body>
    <header class="bg-blue-500 text-white p-4">
      <h1 class="text-2xl font-bold">ハロー</h1>
    </header>
    <main class="container mx-auto mt-8">
      <p class="text-lg">世界</p>
    </main>
  </body>
</html>

TailwindCSSをビルド

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

これで完了です！

Discussion