daisyUIを使ってポートフォリオサイトを爆速で作った[daisyUI(Tailwind CSS) + Next.js + Vercel]

# パッケージインストール
# eslintなども一緒に入れています
yarn add -D tailwindcss postcss autoprefixer
yarn add eslint-plugin-tailwindcss
yarn add @tailwindcss/typography

# 初期化（設定ファイル作成）
yarn tailwindcss init -p

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

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "plugin:tailwindcss/recommended"
  ],
  "plugins": ["tailwindcss"],
  "rules": {
    // Static Exportだとnext/imageが使えないためオフ
    "@next/next/no-img-element": "off"
  }
}

yarn add daisyui

module.exports = {
  plugins: [require("daisyui")],
}

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  plugins: [require("daisyui")],
}

@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@700&family=Kosugi+Maru&family=Raleway:wght@400;600&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        raleway: ['Raleway'],
        kosugimaru: ['Kosugi Maru'],
        azeretmono: ['Azeret Mono'],
      },
    },
  },
  plugins: [require("@tailwindcss/typography"), require("daisyui")],
}

const NavBar: NextPage = () => {

  return (
    <div id='NavBar' className='sticky top-0 z-30 bg-opacity-90 backdrop-blur navbar font-raleway font-semibold text-neutral-content'>
      <div className='flex-1 md:text-base text-xs'>
        <ul className='hidden md:flex menu menu-horizontal p-0'>
	  // 左側メニュー
	  // スマホレイアウトのときはhidden
        </ul>
      </div>
      <div className='flex-none'>
        <ul className='menu menu-horizontal p-0 bg-opacity-0'>
	  // 右側メニュー
        </ul>
      </div>
    </div>
  )
}

const About: NextPage = () => {

  return (
    <div id='About' className='text-white py-20 px-6 bg-slate-700/[.70] md:h-screen min-h-[800px] flex justify-center items-center'>
      // ...
        // 画像を入れる場合は、className='card' と同じ位置に <img> を追加します
        <div className='font-kosugimaru card md:w-96 w-60 bg-base-100 text-gray-900 shadow-xl'>
          <ul className='card-body flex flex-col gap-2 text-left font-raleway'>
            <div className='card-title md:text-xl text-lg font-raleway font-semibold'>Items used</div>
            <li className='flex gap-2 md:text-base text-sm'><img src='./images/check-o.svg' />Framework: <a className='link' href='https://nextjs.org/' target={'_blank'} rel='noopener noreferrer'>Next.js</a></li>
            <li className='flex gap-2 md:text-base text-sm'><img src='./images/check-o.svg' />CSS component: <a className='link' href='https://daisyui.com/' target={'_blank'} rel='noopener noreferrer'>daisyUI</a></li>
            <li className='flex gap-2 md:text-base text-sm'><img src='./images/check-o.svg' />Hosted by: <a className='link' href='https://vercel.com/' target={'_blank'} rel='noopener noreferrer'>Vercel</a></li>
          </ul>
        </div>
	// ...
    </div>
  )
}

const Welcome: NextPage = () => {

  return (
    <div id='Welcome' className='flex flex-col justify-center items-center py-20 md:py-30'>
      // className='mockup-window' を指定
      // そのままだと背景色がないので bg-xxx で色を指定しました。
      <div className='mockup-window bg-slate-400 md:w-9/12 w-10/12 shadow-2xl max-w-5xl'>
        <div className='flex flex-col justify-center items-center gap-4 bg-slate-500 bg-opacity-90 py-10'>
          <div className='relative md:w-60 md:h-60 w-40 h-40'>
            <img className='mask mask-squircle' src="/images/nakaatsu_icon.png" />
          </div>
          <div className='md:block hidden mockup-code bg-opacity-30 border-base-content border-2 border-opacity-10 w-4/6'>
            <pre data-prefix="$"><code>Welcome to nakaatsu&apos;s site.</code></pre>
          </div>
          <div className='md:hidden text-white font-mono'>$ Welcome to<br />nakaatsu&apos;s site.</div>
        </div>
      </div>
    </div>
  )
}