TailwindCSS-2 JIT CSS編譯與JIT設定
為了減少產生出的.css檔案大小，必須使用postccs來編譯HTML與JS使用到的CSS。
1. 修改tailwind.config.js
在content欄位內加上"./public/**/*.{html,js}"，指定TailwindCSS的網頁檔案位置：
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
2. 修改package.json
修改專案根目錄裡的package.json，加上組建與偵測的scripts命令選項：
{
"devDependencies": {
"autoprefixer": "^10.4.2",
"postcss": "^8.4.6",
"tailwindcss": "^3.0.18"
},
"scripts": {
"build": "tailwind -i src/main.css -o public/styles.css",
"watch": "tailwind -i src/main.css -o public/styles.css --watch"
}
}
3. 修改index.html
加入link的CSS檔與使用的class：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tailwindcss-1</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-sky-200">
Hello
</body>
</html>
4. 編譯CSS
cd d:\git\tailwindcss-1
npm run build
5. 瀏覽index.html
在IDEA裡點擊index.html，再按瀏覽器工具列的Chrome瀏覽器圖示即能即時觀看網頁外觀。瀏覽器預設會瀏覽網址：http://localhost:63341/tailwindcss-1/public/index.html。63341通訊埠在
6. IDEA瀏覽器設定
設定→【Tools】→【Web Browsers and Preview】→勾選要使用的瀏覽器，並變更【Reload page in browser】為【On Save】或【On Change】
7. JIT (Just-In-Time)編譯
為了不必每次修改了index.html就執行npm run build，我們可以使用TailwindCSS的JIT編譯功能：
cd d:\git\tailwindcss-1
npm run watch
執行npm run watch時會自動偵測.html是否有被異動，有異動時才會重新編譯而產生新的styles.css。
8. 修改index.html
把Hello加上<h1>標籤，並加上class=""屬性，瀏覽網頁觀察內容是否有即時變動：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tailwindcss-1</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-blue-500">
<h1 class="m-4 text-white">Hello</h1>
</body>
</html>
＃＃
您可能也會有興趣的類似文章
- TailwindCSS-1 用IntelliJ IDEA 學習TailwindCSS (1則留言, 2022/11/02)
- TailwindCSS-3 基本CSS類別：按鈕示範 (0則留言, 2022/11/03)
- TailwindCSS-4 登入畫面 (0則留言, 2022/11/04)
- [HTML&CSS] 鎖定左側功能選單，不隨頁面捲動 (0則留言, 2007/04/05)
- [jQuery] 動態建立元素的事件觸發 (0則留言, 2015/10/25)
- 初試AJAX：中文的傳遞與接收 (0則留言, 2007/03/16)
- [jQuery元件] Fancybox 3使用備忘 (0則留言, 2018/08/26)
- [Blog] 加入Furl與del.icio.us的連結 (0則留言, 2005/03/04)
- 把文章的分類當做HEMiDEMi的標籤：Xuite自動書籤按鈕 V1.3 (2則留言, 2007/02/27)
- jQuery DataTables範例1：啟始設定 (0則留言, 2011/10/20)
- 修改自動產生分享書籤的按鈕 (4則留言, 2007/02/11)
- [Blog] Furl與del.icio.us的快速按鈕 (0則留言, 2005/03/05)
- 把MyBlogLog的頭像圖形(Avatar)顯示在訪客回應裡 (4則留言, 2007/04/11)
- JavaScript Collector: 包羅萬象的JavaScript檔案庫 (0則留言, 2007/03/20)
- 變更MyBlogLog的onclick事件處理程式 (V1.3修改) (8則留言, 2007/04/08)
Sorry, 很久沒用Google sc…