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

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

![tailwindform.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/1575b75e-c92b-24a1-4f32-7f2a1283fdff.gif)


# 開発環境

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の確認
![tailwindform.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/a5478ca3-1dde-1aaa-3de4-ab97c0e50342.gif)


## tailwindcss/form無しの場合

![Notailwindform.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/c1cbc0ec-c7e3-1757-32ea-d9eb02dfa5af.gif)


# コード部分
## Feed
```diff_jsx: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
```diff_jsx: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

```diff_jsx: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


#### ドキュメント

https://github.com/tailwindlabs/tailwindcss-forms

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/f6c3ef67-0d43-6b4f-40ca-9c13379bfcef.png)




#### 導入方法
https://tailwindcss.com/docs/plugins

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/a402f39a-6c7e-537f-0394-65e5ab369a35.png)



## javascript

## Next.js


## React

## firebase

## その他

Udemy

70. Add the input section of the feed component

https://www.udemy.com/course/react-js-tutorial/learn/lecture/32461738#overview


githubコミット分


https://github.com/RYA234/twitter-clone/commit/48d97464c9cb5f0f6b1d3cd579dd64a32c305a43