NextJS＋TailwindCSSでのフロントエンド開発

記事を作成する前の前段階として調査した内容を整理する

開発環境

• Windows10 HOME
• Visual Studio Code
• node.js v22.14.0
• npm v11.3.0

プロジェクトの作成からTailwindCSSの適応までは以下の公式サイトをもとに構築していく
https://tailwindcss.com/docs/installation/framework-guides/nextjs

1.プロジェクトの作成とTailwindCSSのインストール

上記サイトの手順[01][02]を実行

# [01]
# NextJSのプロジェクトを任意のフォルダに作成
# プロジェクト名の決定やTypeScriptの設定などの選択が出るが基本デフォルトのまま実行した
npx create-next-app@latest

# [02]
# Tailwind CSSのインストール
npm install tailwindcss @tailwindcss/postcss postcss

2.TailwindCSSの設定あれこれ

※とりあえず意味は分からないものの手順に沿って実施する
[03][04]の実施

3.一旦起動

[05]
npm run dev

4.TailwindCSSお試し

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  );
}

className属性を実装したいものに変えていく感じでデザインをいじっていくと今のところ認識
bootstrapとかと同じようなイメージ？
とりあえずサイトに載っているデザインをピックアップして試していこうと思う