Tailwind 在 Visual Stuio Code 配置

說明

分享在 Visual Studio Code 寫 Tailwind 配置項目，幫助開發者更方便地開發。

套件安裝

Tailwind CSS IntelliSense

類別提示功能

• https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Prettier - Code formatter

可格式化多種程式語言的套件

• https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettier 配置

安裝 Prettier 套件

npm install -D prettier prettier-plugin-tailwindcss

配置

在專案建立 .prettierrc 進行下列配置

.prettierrc

{
  "plugins": [
    // 一定要放在最後一個
    "prettier-plugin-tailwindcss"
  ]
}

參考

• Automatic Class Sorting with Prettier
• Github prettier-plugin-tailwindcss
• tailwindcss Editor setup