前言
公司最近配的一台螢幕，沒辦法調整亮度，亮得要命，眼睛要瞎掉了所以只好自立自強搞一個螢幕遮罩
顯示 Electron 視窗，可調整透明度
專案規格
{
"electron": "^40.2.1",
"tailwindcss": "^4.1.18",
"@tailwindcss/cli": "^4.1.18"
}
※ p.s. 如果 ChatGPT 或 Gemini 要你做一大堆 tailwind 設定
記得跟他說我是用 tailwind v4 喔 😖 (每次都要特別標註，真麻煩)
第一步：專案初始化
首先，建立資料夾並安裝必要的依賴。
# 初始化專案
npm init -y
# 安裝 Electron
npm install electron --save-dev
# 安裝 Tailwind CSS v4 及其 CLI 工具
npm install tailwindcss @tailwindcss/cli --save-dev
第二步：建立 Tailwind 設定
Tailwind v4 簡化了許多設定。我們只需要一個 CSS 入口點。
建立一個 src 資料夾。在 src 內建立 input.css：
/* src/input.css */
@import 'tailwindcss';
/* 讓 body 預設透明，並撐滿視窗 */
body {
@apply m-0 p-0 overflow-hidden bg-transparent;
}
第三步：撰寫 Electron 主進程 (main.js)
✨ 推薦的目錄結構
my-electron-app/
├── node_modules/
├── src/
│ ├── main.js <-- 主進程
│ ├── input.css <-- Tailwind 輸入檔
│ └── index.html <-- 網頁內容
├── dist/
│ └── output.css <-- Tailwind 編譯出來的檔
├── package.json
└── package-lock.json
// main.js
const { app, BrowserWindow, screen } = require('electron')
const path = require('path')
function createWindow() {
const { width, height } = screen.getPrimaryDisplay().workAreaSize
const win = new BrowserWindow({
width: width,
height: height,
x: 0,
y: 0,
frame: true, // 移除視窗邊框 false
transparent: false, // 開啟視窗透明 true
alwaysOnTop: false, // 始終置頂 true
fullscreen: false, // 全螢幕 true
skipTaskbar: false, // 不在工具列顯示 true
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
show: false,
})
win.loadFile(path.join(__dirname, 'index.html'))
win.once('ready-to-show', () => {
win.show()
win.setAlwaysOnTop(true, 'screen-saver')
})
}
app.whenReady().then(createWindow)
🗹 BrowserWindow 設定
- 待
npm start可以顯示視窗、調整透明度後再一一追加設定
🗹 __dirname
- 為確保打包專案後，可取得到 index.html 的正確路徑，採用
const path = require('path')
win.loadFile(path.join(__dirname, 'index.html'))
第四步：撰寫前端介面 (index.html)
我們利用 Tailwind v4 的 CSS 變數功能來動態調整顏色與不透明度。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="../dist/output.css" />
</head>
<body class="h-screen w-screen overflow-hidden">
<div
id="overlay"
class="fixed inset-0 transition-all duration-300 pointer-events-none"
style="background-color: rgba(var(--overlay-color, 0, 0, 0), var(--overlay-opacity, 0.5));"
></div>
<div
class="fixed top-4 right-4 p-4 bg-white/80 backdrop-blur rounded-xl shadow hover:opacity-100 opacity-20 transition-opacity z-10"
>
<label class="block">
透明度
<input
type="range"
id="opacityInput"
min="0"
max="1"
step="0.1"
value="0.5"
class="w-full"
/>
</label>
</div>
<script>
const opacityInput = document.getElementById('opacityInput')
function updateStyle() {
document.body.style.setProperty('--overlay-opacity', opacityInput.value)
}
opacityInput.oninput = updateStyle
</script>
</body>
</html>
第五階段：啟動設定 (package.json)
{
...
"main": "src/main.js", // <-- 這裡要指向 src 內部
"scripts": {
"build:css": "npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css",
"watch:css": "npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch",
"start": "npm run build:css && electron .",
"dev": "npm run build:css && (npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch & electron .)"
},
...
}
- build:css：手動編譯。
當你執行npm run build:css時，它會掃描你的 HTML/組件，根據你用到的 Class 名稱，產生一個最小化的 CSS 檔案。
這通常用於專案上線前。 - watch:css：自動監控。
當你執行npm run watch:css時，CLI 會一直開著。只要你修改了 HTML 或 CSS 並存檔，它就會即時更新輸出檔案，讓你在開發時不用手動一直跑指令。 npx @tailwindcss/cli: 呼叫 Tailwind CSS 的執行工具-i ./src/input.css
Input（輸入）： 告訴工具你的原始 CSS 檔案在哪裡（通常裡面只有一行 @import "tailwindcss";）。-o ./dist/output.css
Output（輸出）： 告訴工具編譯完的成品要放在哪裡。你的 HTML 應該引用這個檔案。--watch
監控模式： 讓程式不要結束，持續觀察檔案變動。
第六階段：執行
在終端機輸入：
npm run start
# 或
npm start
可以透過右上方小面板控制透明度
