因為我想要做到類似這個的效果呈現：

結果我發現 tailwind好像沒有類似的東西給我套(如果有的話，告訴我，拜託！！)，然後這個專案頭已經洗下去了，tailwind已經深入骨隨
如果先在要把tailwind 換成 bootstrap 無異於刮骨療傷；雖然我有查到tailwind 跟 bootstrap 共生在一個專案裡的方法，但我覺得缺點很多，包括：專案凌亂、切割不易、可能交互影響...等，在無數個夜晚輾轉難眠，最後還是決定花時間自己來做一個。

所以...我只好來手刻一個醜到爆的切換元件來使用...

Nav.jsx
因為bootstrap 把他放在Navs and tabs，所以我就跟著命名叫做Navs。
在開發階段，我就直接把他放到pages底下，然後註冊一個路徑return Navs

import React,{useState} from 'react'; 
import '/resources/css/nav.css';  //其實裡頭只有定義一個active的background-color 
function Comment({comment}){ 
    return <div>{comment}</div>; 
} 
export default function Navs({ title , detail }) { 
    const [show , setShow] = useState(0); 
    return ( 
        <div> 
            <div className="flex flex-wrap mb-4 mt-4"> 
                { 
                    title.map( (value,key) => { 
                        if(key === show) 
                            return <button className="bg-gray-100 px-2 ml-4 mr-4 active" 
                            onClick={ () => setShow(key)}>{value}</button> 
                        else 
                            return <button className="bg-gray-100 px-2 ml-4 mr-4" 
                            onClick={ () => setShow(key)}>{value}</button> 
                    }) 
                } 
            </div> 
            <div id="content"> 
                <Comment comment={detail[show]}/> 
            </div> 
        </div> 
    ); 
}

最後的成果長這樣：
ps.很醜我知道，但起碼功能差不多@@

完成之後，就把這個Navs拉到resources/js/Components

番外的番外

因為我覺得

if(key === show)  
    return <button className="bg-gray-100 px-2 ml-4 mr-4 active" 
                    onClick={ () => setShow(key)}>{value}</button>  
else  
    return <button className="bg-gray-100 px-2 ml-4 mr-4" 
                    onClick={ () => setShow(key)}>{value}</button>

這段真的很醜，醜到我都快哭了

類似的應用如果是在blade裡面，就可以使用類似這個方法：

<button className="bg-gray-100 px-2 ml-4 mr-4 {{ $key === $show ? 'active' : '' }}" 
onClick={ () => setShow(key)}>{value}</button>

那blade 可以，jsx一定也可以，所以我們將上面的判斷改成：

<div className="flex flex-wrap mb-4 mt-4"> 
    { 
        title.map( (value,key) => { 
            return <button className={`bg-gray-100 px-2 ml-4 mr-4 ${key === show && 'active'}`} 
            onClick={ () => setShow(key)}>{value}</button> 
        }) 
    } 
</div>

使用 判別式&&輸出 這個方式 可以參考官網，但是他有一個缺點：當判別式是false的時候 還是會回傳false到className之中，所以如果有把false當作class的話，會有所影響
所以也可以改成三元算子的方式

return <button className={`bg-gray-100 px-2 ml-4 mr-4 ${key === show ? 'active' : ''}`} 
onClick={ () => setShow(key)}>{value}</button>

注意：平常我們在寫className的時候，會直接這樣寫：className="ml-4" ，但如果今天要在className裡面加入js判斷
要把雙引號(" xxx ")改成 大括號，這裡的大括號是告訴jsx 這裡要進行js的編譯
然後因為最後js也是要回傳字串，這時候要在字串裡面做js的判斷，所以要把引號改成反點號，並在裡面使用 ${xxxx} (ps.這個就是樣板字面值的基本寫法~)
樣板字面值的相關語法可參考這裡