承上篇

接下來直接搭配官方文件中的內容，說說我最喜歡 Tailwind 的地方：

1. 響應式
   這部分用法其實跟 Bootstrap 很像，可以達到指定寬度範圍下，佈局、樣式的變化，只是語法結構使用前綴來表達，如下：

   <img class="w-16 md:w-32 lg:w-48" src="...">
   

2. pseudo-classes和 pseudo-elements
   也就是指 hover、active、focus、first、last、odd、even、before、after等等，也是使用前綴的方式來表達，如下：

   <button class="bg-sky-500 hover:bg-sky-700 ...">
    Save changes
   </button>
   

3. 黑暗模式
   想不到吧！！ Tailwind 竟然可以直接設定黑暗模式下的樣式，而且用法也是使用前綴的方式來表達！！剛學到這裡的我激動到像我學了一個黑魔法一樣，我好興奮啊！！！！

   <div class="bg-white dark:bg-gray-900 text-black dark:text-white">
    Dark Mode
   </div>
   

   而且而且！！ Tailwind 支援自動偵測系統是否為深色模式，也就是你的電腦或瀏覽器本身就設定為黑暗模式的話，就會自動呈現 Tailwind 的黑暗模式的指令，是不是超級好棒棒！！當然，Tailwind 也支援手動切換，在 tailwind.config.js 中，需要加上這一行：

   // tailwind.config.js
   module.exports = {
     darkMode: 'selector', // 'selector'為手動切換，沒寫這行 或 'media' 就是自動偵測
     theme: {
       extend: {},
     },
     plugins: [],
    }
   

   然後在可以使用 JavaScript 來寫出切換深色模式的功能，或是在 React 用 useState 輕鬆切換：

   import React, { useState } from 'react';
   
   function App() {
    const [darkMode, setDarkMode] = useState(false);
   
    const toggleDarkMode = () => {
      setDarkMode(!darkMode);
    };
   
    return (
      <div className={darkMode ? 'dark' : ''}>
        <div className="bg-white dark:bg-gray-900 text-black dark:text-white p-4">
          這是手動切換的黑暗模式內容
        </div>
        <button 
          onClick={toggleDarkMode} 
          className="mt-4 p-2 bg-blue-500 text-white rounded"
        >
          切換深色模式
        </button>
      </div>
     );
    }
   
    export default App;
   

4. 自定義顏色
   這部分也是深深深得我心！！！想當初用 Bootstrap 時想要自訂顏色，我有多覺得麻煩，看到這個功能就有多開心！！Tailwind CSS v3.0 及以後版本引入了 JIT（Just-In-Time）模式，你可以使用任意值語法（Arbitrary Values），使用方式是將自訂顏色寫在中括號中，如下：

   <div class="bg-[#ff5733] text-[#fff000] p-4">
     Just in time
   </div>
   

以上這些都是我愛 tailwind 卡慘死的原因，但隨著專案逐漸變大，如果還是讓開發者自由奔放地在 class 中寫自定義的樣式，後面維運的人的怨氣應該不會亞於開發者的快樂XD，所以 tailwind 的 config 檔就很重要啦～那今天就先到這裡，明天再見啦～