環境の準備

①ターミナルで、アプリケーションを作成する。

$ npx create-next-app@latest
$ cd <プロジェクト名>
$ yarn dev

② 必要なパッケージをインストールする。

公式サイト：Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

③ 不要なファイルを削除する。

api
styles/home.module.css

コンポーネント・ファイル構成

├── components
|    └── Layout.js
├── pages
| 　 ├── pokemon
|    |     └── [id].js
|    ├── _app.js
|    └── index.js
├── package-lock.json
├── package.json
├── postcss.config.js
└── twilwind.config.js

公式サイト：PokeAPI

components/Layout.js

import Head from 'next/head';

const Layout = ({ title, children }) => {
  return (
    <div className='bg-gray-100'>
      <Head>
        <title>{title}</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <main className='container mx-auto max-w-3xl pt-8 min-h-screen'>
        {children}
      </main>
    </div>
  );
};

export default Layout;

pages/pokemon/[id].js

import Layout from '../../components/Layout';
import Link from 'next/link';

const Pokemon = ({ pokemon }) => {
  const zeroPadding = (num, len) => {
    // 指定した数値の前に指定した桁数分0を追加したあと、後ろから0桁を返す
    return (Array(len).join('0') + num).slice(-len);
  };
  return (
    <Layout title={pokemon.name}>
      <div className='m-auto w-2/3'>
        <div className='flex flex-col  bg-white rounded-md p-8 aspect-square justify-center shadow-lg'>
          <span className='ml-2 font-light'>
            No.{zeroPadding(pokemon.id + 1, 3)}
          </span>

          <img className='mx-auto' src={pokemon.image} alt={pokemon.name} />

          <h2 className='text-2xl mt-6 mb-2 font-bold'>{pokemon.name}</h2>
          {pokemon.types.map((type, index) => (
            <p key={index}>{type.type.name}</p>
          ))}
        </div>
      </div>

      <p className='mt-10 text-center'>
        <Link href='/'>
          <a>
            <button className='focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-700 hover:shadow-lg'>
              一覧に戻る
            </button>
          </a>
        </Link>
      </p>
    </Layout>
  );
};

//getServerSidePropsを利用してデータを取得しページに表示させる
export const getServerSideProps = async (context) => {
  const { id } = context.query;
  const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
  const pokemon = await res.json();
  const paddedId = ('00' + id).slice(-3);
  pokemon.image = `https://assets.pokemon.com/assets/cms2/img/pokedex/detail/${paddedId}.png`;
  return {
    props: { pokemon },
  };
};

export default Pokemon;

pages/index.js

import Layout from '../components/Layout';
import Link from 'next/link';

export default function Home({ pokemon }) {
  /**
   * 足りない桁数を0埋めする関数
   * @param num: 表示させたい数値
   * @param len: 表示させたい桁数
   * @returns {string}
   */
  const zeroPadding = (num, len) => {
    // 指定した数値の前に指定した桁数分0を追加したあと、後ろから0桁を返す
    return (Array(len).join('0') + num).slice(-len);
  };
  return (
    <Layout title='NextJS PokeDex'>
      {/* 　//grid-cols-{n}ユーティリティを使用して、n個の同じサイズの列を持つグリッドを作成 */}
      <div className={'grid grid-cols-3 gap-3'}>
        {pokemon.map((item, index) => (
          <p key={index}>
            <Link href={`/pokemon/${index + 1}`}>
              <a className='border-b-4 py-4 border-grey my-0 hover:shadow-md capitalize flex items-center text-xl font-bold bg-gray-100 shadow-lg'>
                <span className='mr-2 font-light'>
                  {zeroPadding(index + 1, 3)}
                </span>
                <img
                  src={item.image}
                  alt={item.name}
                  className='w-10 h-10 mr-2 font-bold'
                />
                {item.name}
              </a>
            </Link>
          </p>
        ))}
      </div>
    </Layout>
  );
}
//getServerSidePropsを利用してデータを取得しページに表示させる
export const getStaticProps = async () => {
  const res = await fetch('https://pokeapi.co/api/v2/pokemon?limit=150');
  const { results } = await res.json();
  const pokemon = results.map((pokeman, index) => {
    const paddedId = ('00' + (index + 1)).slice(-3);
    const image = `https://assets.pokemon.com/assets/cms2/img/pokedex/detail/${paddedId}.png`;
    return { ...pokeman, image };
  });
  return {
    props: { pokemon },
  };
};

styles/globals.css

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

tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

参考サイト

Build a Pokedex with NextJS and Tailwind CSS
Crea una pokedex con React, NextJS y Apollo GraphQL