嗨大家好，昨天建立的如何呢！
我想應該不會遇到太多的困難吧～

雖然上次沒有明講，
但我想應該大部分人都是用 VS Code 在開發吧？

既然如此我們就來介紹個好用的東西！
 

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense 是一個 VS Code 的擴充套件，它可以讓你在 Tailwind 的開發體驗急速上升，這樣說你一定不明白，讓我們直接列出來看看各項特色功能吧。

語法自動完成

智慧提示可以使用 class 名稱，以及 class 實際上所代表的功能，語法提示的話就像是這樣：

那除了語法提示之外，可以看到語法提示的右側也會簡略的顯示出內容，讓你快速了解這個功能的用途。

那在圖示上也可以發現，一般的功能都是屬性的符號，而如果是可以被加在前面當前綴詞的變化模式那類，就會是 {} 的符號。

顏色則會直接顯示顏色本身，改變顏色用的功能會顯示為調色盤。

在 css 檔案之中，撰寫指令也有自動提示：

語法檢查 (Linting)

語法檢查功能可以顯示出潛在的錯誤及 bug，例如像是相同用途的 class 不得放在同個元素，上圖舉例：

以這個例子來說，因為 flex 和 block 是同一個 css 屬性的不同參數而已，如果你同時寫了 flex 和 block，看起來就會是：

div {
  display: flex;
  display: block;
}

這樣的屬性設定是毫無意義的，而在 Tailwind CSS 之中，只會使第一個寫的屬性生效，會忽略後面相同屬性的功能，所以這個例子之中也就是只會具有 flex 的效果，而不會是 blcok。

同時滑鼠懸停時也會跳出錯誤提示：

還有你如果在 css 當中撰寫語法，若有錯誤及 bug 也會顯示：

懸停預覽

如果你熟悉 CSS 功能，但對 Tailwind 語法不熟悉，這個功能肯定可以大大的幫上你。 把滑鼠懸停在 class 上，會跳出這個 class 的內部實際上實現的功能以及在 css 中真正的 class 名稱：

語法強調

提供語法定義來正確地強調 Tailwind 功能。
 

安裝

安裝方法其實非常簡單，就如同在 VS Code 中安裝其他擴充套件一般。

STEP 1

首先，搜尋 Tailwind

STEP 2

沒錯，就是第一個，你沒看錯。
名稱一樣的也只有它了XD
安裝給它按下去！

STEP 3

你還期待有 Step 3？
花不到幾秒的時間就安裝好了！
既然安裝好就快去用了啦 XD
 

業障小蚯蚓

假設你在 css 檔中發現這個警告 ...

其實不要緊，一樣都是正常提示語法的，不過因為 @tailwind、@screen、@apply 這些爆出警告的 CSS @規則都是 Tailwind 自訂的指令，必須透過安裝 VS Code 的 PostCSS Language Support 擴充套件或是其他可以幫助解析 PostCSS 語法的擴充套件才能消除業障的小蚯蚓。

搜尋一下，然後安裝第二個那個就可以囉～
 

補充

雖然沒什麼好補充的，不過以下這邊有幾個要點要注意一下哦！

語法沒提示

要使語法可以提示，可以檢查以下三點：

• 專案根目錄中是否有 tailwind.config.js
• 是否在專案中有安裝 Tailwind。
• tailwind.config.js 中是否存在錯誤

某些語法在提示視窗中找不到

在預設沒有開啟 JIT 模式的情況下，語法提示的詳細程度是根據配置檔的詳細程度，Tailwind CSS IntelliSense 並不會提供你沒有設定或無法使用的語法。

若開啟 JIT 模式則會全部語法都提示，但別為了能夠提示全部的語法而開啟 JIT。

還是不跳提示？

如果上面這些方法在你的檔案中都沒辦法解決問題，可以開啟 Tailwind CSS IntelliSense 中的擴充套件設定：

在 Include Languages 裡面增加你所使用的檔案類型。

只有 VS Code 能用嗎？

JetBrains IDEs 也可以支援相關的語法功能，
但還是推薦你使用 VS Code 就好。
 

呼！ 今天的圖片好多。

因為啊其實官方也沒有介紹的很詳細，
所以如果這篇有錯誤的地方請不要害羞～
大力的在下面留言告訴我哦！

使用上應該是不太會遇到問題，
下個篇章，我們就要來拆阿嬤的裹腳布囉～
(啊 ... 臭！)
 

給你們的回家作業：

• 作業實施要點：
  • 試著安裝 Tailwind CSS IntelliSense，然後寫了幾句跳出提示後再解除安裝，大約重複五十次
     

關於兔兔們：

• Tailwind CSS 臺灣官網
• Tailwind CSS 臺灣 (臉書粉絲專頁)
• 兔兔教 × Tailwind CSS Taiwan (臉書社群)
• 兔兔教大本營

( # 兔兔小聲說 )

兔兔給認真看到這裡的人一點小福利喲！
只要有看到這裡，只要裝一次就好而且不用解除安裝。

如果沒有追蹤每篇的兔兔小聲說，
就讓他們重複練習 100 次吧！！！

(咦 ... 作業上說好的 50 次呢 ...)