共通レイアウト用のコンポーネント components/Laout.jsファイルを作成して下記のコーディングを行う import Head from 'next/head' import Link from 'next/link' export default function Layout({children, title= "HP by nuxtjs"}) { return ( <div className="flex justify-center items-center flex-col min-h-screen text-gray-600 text-sm font-mono"> </div>

nuxtjsとtailwindcssのインストール nuxtjsをインストール npx create-next-app . --use-npm tailwindcssだけインストールするとエラーが発生するため npm i tailwindcss (下記のエラーが発生する) npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to reso…

問合せフォームのサンプル <section class="text-gray-600 body-font relative"> <div class="container px-5 py-24 mx-auto"> <div class="flex flex-col text-center w-full mb-12"> <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">お問い合わせ</h1> </div></div></section>

カードの例 PC・タブレットの場合 スマートフォンの場合 コード 上記のレイアウトを実現するためのHTMLとCSS <div class="md:flex justify-center mb-16"> <div class="py-4"> <div class="w-11/12 md:max-w-md mx-auto my-4 shadow-x1 border rounded-lg overflow-hidden"> <img src="image1.jpg" class="h-48 w-full object-cover"> <div class="p-4"> </div></div></div></div>

参考ページ tailwindcss.com サンプルコード1 <div class="grid grid-cols-4"> <div class="border-2">1</div> <div class="border-2 col-span-2 bg-green-200">2</div> </div>

container tailwindcss.com 上下固定でメイン部分がスクロールするサンプル <header class="sticky top-0 bg-blue-300"> header </header> <main class="container bg-indigo-200 h-screen mx-auto px-4 overflow-scroll"> メイン部分 </main> <footer class="fixed bottom-0 w-full bg-green-300 text-center text-white">footer</footer> invisible 要…

参考ページ tailwindcss.com 記事一覧を作ってみる <section class="mt-16"> <h2 class="text-center mt-8 mb-8">記事一覧</h2> <div class="flex justify-center space-x-16 ml-4 mr-4"> <div class="w-1/4 border"> <img src="image1.jpg" class="w-96"> <h3 class="p-2 text-center">タイトル</h3> <p class="p-4">ここに文章が入ります。ここに文章が入ります。ここに文章が…</p></div></div></section>

position (参考ページ) tailwindcss.com ※こちらのページが自分は一番分かりやすかった。ありがとうございます。 saruwakakun.com 親がrelative 子がabsolute <div class="mt-96 relative w-96 h-60 bg-blue-200"> <div class="absolute w-40 h-40 top-8 left-8 bg-red-300"></div> <div class="absolute w-40 h-40 top-16 left-16 bg-green-300"></div> </div> 画像の上にテ…

tailwindcss(追い風) UIキットではなく、ユーティリティクラスになっているので、カスタマイズしやすい レスポンス対応、flexbox,grid採用 Laravel8からtailwindcssが採用される CDNで利用する場合の注意点 下記のことがCDNで利用する場合できない。 Tailwin…

参考ページ 下記のページの手順の場合、途中でエラーが出るので、少し手順を変えてインストールしてます。 tailwindcss.com インストール 下記のインストールだとエラーが発生する yarn add @nuxtjs/tailwindcss tailwindcss 下記のように指定してインストー…