TailwindCSS-1 用IntelliJ IDEA 學習TailwindCSS
TailwindCSS是一個標榜「功能優先」（Utility-first）、快速開發的CSS框架，它提供了各種通用的功能性樣式類別，讓我們任意組合疊加成需要的網頁外觀，在2021年12月推出了3.0版，而網路上找得到的教學都是使用VS Code，今天我試著使用命令行和IntelliJ IDEA搭建TailwindCSS的開發環境，並且希望能有恒心地持續製作相關的系列學習影片。
1. 開發環境安裝與設定
1.1. 安裝nodejs
由Node.js下載 Node.js的最新版（16.13.2 ，包含 npm 8.1.2），Node.js的安裝資料夾必須加入PATH環境變數。
Windows 11的另一個安裝方法：
rem 先查看Node.js是否安裝，若尚未安裝則用install，有安裝過則用upgrade
winget list Node.js
winget install Node.js
若以前安裝過Node.js，升級命令如下：
winget upgrade Node.js
安裝後確認能否正確執行：
node -v
npm -v
1.2. 專在專案案資料夾建置
假設專案的根目錄是d:\git而第一個TailwindCSS專案名稱是tailwindcss-1，以下命令建立三個資料夾 :
cd /d d:\git
mkdir tailwindcss-1
mkdir tailwindcss-1\src
mkdir tailwindcss-1\public
cd d:\git\tailwindcss-1
1.3. 安裝tailwindcss等3個模組
rem 目前位置：d:\git\tailwindcss-1\
rem -D 是在package.json寫入devDependencies
npm install -D tailwindcss postcss autoprefixer
rem 安裝成功後驗證版本
npm list
若出現npm版本不符訊息則以下列命令更新，更新後再重新安裝上列三個套件：
npm install -g npm@latest
1.4. 啟始Tailwindcss環境
以下命令啟始TailwindCSS環境，產生兩個設定檔 tailwind.config.js與postcss.config.js：
npx tailwindcss init -p
如果要產生完整內容的tailwind.config.js則執行：
npx tailwindcss init --full
2. 啟動IntelliJ IDEA
啟動IntelliJ IDEA後開啟專案資料夾D:\git\tailwindcss-1\，IDEA啟動後會建立.idea專案資料夾。
IDEA設定→【Plugins】→【Marketplace】→搜尋tailwind→安裝【Tailwind CSS】外掛。
3. 建立專案主要.css檔
側邊欄【Project】→在【src】上按右鍵→【New】→【Stylesheet】→輸入「main」以建立 main.css，內容為：
@tailwind base;
@tailwind components;
@tailwind utilities;
4. 建立對外的主網頁index.html
側邊欄【Project】→在【public】上按右鍵→【New】→【HTML File】→選用HTML 5 file→輸入「index」以建立 index.html，內容為：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tailwindcss-1</title>
</head>
<body class="bg-sky-200">
</body>
</html>
5. 測試TailwindCSS自動補全功能
編輯index.html，將<body>改成<body class="">，游標移到雙引號內輸入「bg-」，若出現多個bg-開頭的CSS類別則表示開發環境建置正確。
當游標停在CSS類別上時按〔Ctrl+Q〕可顯示類別的定義。
[!TIP] 技巧💡
若無法正常顯示時，查詢外掛與Tailwind CSS版本的相容性，可降版測試。例如IDEA 2022.2.3無法使用Tailwind 3.2:npm install tailwindcss@3.1.8
6. 相關鏈接
＃＃
您可能也會有興趣的類似文章
- TailwindCSS-2 JIT CSS編譯與JIT設定 (0則留言, 2022/11/02)
- TailwindCSS-3 基本CSS類別：按鈕示範 (0則留言, 2022/11/03)
- TailwindCSS-4 登入畫面 (0則留言, 2022/11/04)
- [React-01] 使用IntelliJ IDEA學習React (0則留言, 2018/06/24)
- [HTML&CSS] 鎖定左側功能選單，不隨頁面捲動 (0則留言, 2007/04/05)
- [jQuery] 動態建立元素的事件觸發 (0則留言, 2015/10/25)
- jQuery DataTables範例1：啟始設定 (0則留言, 2011/10/20)
- WordPress減肥記：壓縮JavaScript檔的大小 (6則留言, 2010/06/08)
- [jQuery元件] Fancybox 3使用備忘 (0則留言, 2018/08/26)
- 把文章的分類當做HEMiDEMi的標籤：Xuite自動書籤按鈕 V1.3 (2則留言, 2007/02/27)
- 用JavaScript寫的迷宮遊戲 (0則留言, 2005/05/25)
- 初試AJAX：中文的傳遞與接收 (0則留言, 2007/03/16)
- 修改自動產生分享書籤的按鈕 (4則留言, 2007/02/11)
- 變更MyBlogLog的onclick事件處理程式 (V1.3修改) (8則留言, 2007/04/08)
- [PSPad] PSPad的Scripting功能初探 (2則留言, 2006/06/09)
IntelliJ IDEA 2022.2.3無法正常操作Tailwind CSS 3.2，必須降級為Tailwind CSS 3.18才能正常。