Next.js (5): TailwindCSSの導入 & ZennのArticlesカードを作ってみました

$ npx create-next-app@latest --typescript
Need to install the following packages:
  create-next-app@latest
Ok to proceed? (y) y

# アプリの名前を入力します。
✔ What is your project named? … redpanda-nextjs
Creating a new Next.js app in /Users/redpanda/Projects/redpanda-nextjs.

# アプリをVS Codeで開きます。
$ code redpanda-nextjs/

# package.json
"dependencies": {
    "next": "12.1.4",
    "react": "18.0.0",
    "react-dom": "18.0.0"
  },

# アプリのホームディレクトリで実行します。
$ npm install -D tailwindcss postcss autoprefixer prettier prettier-plugin-tailwindcss

# tailwindcssの設定ファイルが作成されます。
$ npx tailwindcss init -p

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>
   
<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>

module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

@tailwind base;
@tailwind components;
@tailwind utilities;

$ npm run dev

// port番号はデフォルト3000ですが、私はすでに使っているので3001
// 表示されたlocalhostのURLをブラウザで開きます。
warn  - Port 3000 is in use, trying 3001 instead.
ready - started server on 0.0.0.0:3001, url: http://localhost:3001

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    reactRoot: "concurrent",
  },
};

module.exports = nextConfig;

import Image from "next/image";
import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <div className="mh-screen bg-gray-200 p-10">
      <div className=" grid max-w-7xl place-items-center gap-5 lg:grid-cols-3 xl:grid-cols-4">
        {/* Card */}
        <div className="relative overflow-hidden rounded-xl bg-white shadow-lg">
          <div className="flex justify-center bg-blue-200 ">
            <a className="absolute top-2 left-2 rounded-3xl bg-[#3ea8ff] py-1 px-2 text-xs font-bold text-white">
              TECH
            </a>
            <div className="p-9 text-5xl">🦾</div>
          </div>
          <div className="space-y-4 p-4">
            <div className="mb-6 text-lg font-bold text-gray-500">
              Next.js : CSR SSG SSRについて
            </div>
            <div className="space-x-2 leading-3">
              <a className="rounded-md bg-gray-200 py-1 px-2 text-xs font-light text-gray-500">
                React
              </a>
              <a className="rounded-md bg-gray-200 py-1 px-2 text-xs font-light text-gray-500">
                JavaScript
              </a>
              <a className="rounded-md bg-gray-200 py-1 px-2 text-xs font-light text-gray-500">
                TailwindCSS
              </a>
            </div>
            <div className="flex items-center space-x-2">
              <Image
                src="/cat.jpg"
                width={28}
                height={28}
                className="rounded-full"
                alt="profile"
              />
              <div className="space-y-1">
                <div className="text-xs">mini redpanda</div>
                <div className="text-xs text-gray-500">
                  5日前・2min read ♥️2
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;

<a className="rounded-md bg-gray-200 py-1 px-2 text-xs font-light text-gray-500">
React
 </a>

<div className="space-x-2 leading-3">
  <a className="rounded-md bg-gray-200 py-1 px-2 text-xs font-light text-gray-500">
    React
  </a>
  <a className="rounded-md bg-gray-200 py-1 px-2 text-xs font-light text-gray-500">
    JavaScript
  </a>
  <a className="rounded-md bg-gray-200 py-1 px-2 text-xs font-light text-gray-500">
    TailwindCSS
  </a>
</div>

<div className="flex justify-center bg-blue-200 ">
  <a className="absolute top-2 left-2 rounded-3xl bg-[#3ea8ff] py-1 px-2 text-xs font-bold text-white">
  TECH
  </a>
  <div className="p-9 text-5xl">🦾</div>
</div>

 <div className="relative overflow-hidden rounded-xl bg-white shadow-lg"></div>

<div className="grid max-w-7xl place-items-center gap-5 lg:grid-cols-3 xl:grid-cols-4">
 {/* Card */}
 {/* Card */}
 {/* Card */}
</div>