Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

Tailwind CSS Intellisense 介紹

VS Code 的 Tailwind CSS Intellisense 套件是個很好用的東西,他提供了自動完成,語法 highlight,以及提示等功能,來增強我們對 Tailwind CSS 的開發體驗。

▼ 我自己最喜歡的就是自動完成 (Autocomplete) 功能,雖然語法也記得七七八八了,但有個下拉選單能看到所有 class name,總是會安心許多,而且也不用特別記 width, height 的索引號碼

照片來源:https://github.com/tailwindlabs/tailwindcss-intellisense

如何使用套件

但要使用這個功能,必須達成兩個條件:

  1. 安裝 tailwind CSS
  2. 專案資料夾裡,必須要有 tailwind.config.{js / csj / mjs / ts} 檔案

初步看下來,感覺只能適用在 JS 框架如 Vue, React.. 裡,因為只有 JS 框架的開發,才需要 tailwind.config.js 設定檔。

如果我今天我使用的是 CDN 的 Tailwind CSS,該怎麼辦呢?

如何在 CDN Tailwind CSS 使用套件

以我為例,我的 WordPress Blog 就是用 Tailwind CSS,因此在開發佈景主題時,用的是 PHP 檔案搭配 CDN Tailwind CSS,寫法如下:

<script src="https://cdn.tailwindcss.com"></script>

這時可以搭配一個簡單的 trick 來使用該套件

▼ 在佈景主題的資料夾裡新增一個 tailwind.config.js 檔案,並給他空物件

module.exports = {}

最後路徑會是:/wp-content/themes/你的資料夾名稱/tailwind.config.js

▼ 存檔後,就可以開心的使用 Tailwind CSS Intellisense 套件啦

這個小技巧,不只能用在 PHP 上,只要你使用的是 CDN 的 TailwindCSS,就算是一般的 HTML 檔案,也都可以如法炮製唷。

歡迎給我點鼓勵,讓我知道你來過 :)

8
Subscribe
Notify of
guest

0 則留言
Inline Feedbacks
View all comments