Twitter clone Part3 ツイート欄のUIを実装 tailwindcss/formを使う

概要

今回はツイート欄を実装します。
以下実装後の様子です。

開発環境

OS:Windows10
IDE:VSCode

package.json

{
  "name": "",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^1.0.6",
    "next": "12.0.9",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "^20.4.2",
    "@types/react": "^18.2.15",
    "autoprefixer": "^10.4.2",
    "eslint": "8.8.0",
    "eslint-config-next": "12.0.9",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.18"
  }
}

実装のポイント

tailwindcss/formの確認

tailwindcss/form無しの場合

コード部分

Feed

Feed.jsx

import { SparklesIcon} from "@heroicons/react/solid";
import Input from "./Input";

export default function Feed(){
    return(
        <div className="xl:ml-[370px] border-1 border-r border-gray-200 xl:min-w-[576px] sm:ml-[-73px] flex-grow max-w-xl">
            <div className="flex py-2 px-3 sticky top-0 z-50 bg-white border-b border-gray-200">
                <h2 className="text-lg sm:text-xl font-bold cursor-pointer">Home</h2>
                <div className="hoverEffect flex items-center justify-center px-0 ml-auto w-9 h-9">
                    <SparklesIcon className="h-5"/>
                </div>
            </div>
+            <Input />
        </div>
    )
}

Input

Input.jsx

import {EmojiHappyIcon, PhotographIcon} from '@heroicons/react/outline';

export default function Input(){
    console.log("fdasa");
    return(
        <div className="flex border-b border-gray-200 p-3 space-x-3">
           
            <img
                src="https://www.adscientificindex.com/pictures/0b/50734.jpg"
                alt="user-img"
                className="h-11 w-11 rounded-full cursor-pointer hover:brightness-95"
            />
            <div className="w-full dived-y devide-gray-200">
                <div className="">
                    <textarea className="w-full border-none focus:ring-0 text-lg placeholder-gray-700">
                        What`s happening?`
                    </textarea>
                </div>
                <div className="flex" >
                    <PhotographIcon className="h-10 w-10 hoverEffect p-2 text-sky-500 hover:bg-sky-100" />
                    <EmojiHappyIcon className="h-10 w-10 hoverEffect p-2 text-sky-500 hover:bg-sky-100" />
                </div>
                <button className="bg-blue-400 text-white px-4 py-1.5 rounded-full font-bold">Tweet</button>
            </div>
        </div>
    )
}

tailwind.config.js

tailwind.config.js

module.exports = {
    content: [
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
      extend: {},
    },
    //　素のtextareaの動きを確認する際には下行をコメントにする
+    plugins: [require('@tailwindcss/forms')],
  }

参考

css

tailwind form

ドキュメント

導入方法

javascript

Next.js

React

firebase

その他

Udemy

1. Add the input section of the feed component

githubコミット分