webui: generate tailwind.css in esbuild.go, output to dist/
Move Tailwind CSS generation from npm script to esbuild.go build process
and output generated file to dist/tailwind.css instead of src/tailwind.css
to prevent tracking generated files in git.
Problems Solved:
- Generated CSS file was tracked in git causing unnecessary diffs
- Build process relied on manual npm script execution
- Generated CSS mixed with source files
Solution Architecture:
- Integrated Tailwind CSS generation into Go build process
- Moved output location to dist/ directory (already gitignored)
- Added automatic CSS generation during webui.Build()
- Moved @tailwindcss/cli from devDependencies to regular dependencies
Implementation Details:
- Added generateTailwindCSS() function to run tailwindcss CLI during build
- Modified Build() to call generateTailwindCSS() after npm ci
- Updated file copying logic to skip src/tailwind.css (no longer needed)
- Moved @tailwindcss/cli to regular dependencies to work with --omit dev
- Updated npm tailwind script to output to dist/tailwind.css
- Added src/tailwind.css to .gitignore to prevent accidental tracking
Files Modified:
- sketch/webui/esbuild.go: Added CSS generation and updated build process
- sketch/webui/.gitignore: Added src/tailwind.css exclusion
- sketch/webui/package.json: Moved @tailwindcss/cli to dependencies, updated script
- sketch/webui/src/tailwind.css: Removed from git tracking
The generated CSS is now properly separated from source files and
automatically created during the build process.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s3464450fc2c7851fk
diff --git a/webui/package.json b/webui/package.json
index 55e0a4b..8e97fb7 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -21,12 +21,13 @@
"gentypes": "go run ../cmd/go2ts -o src/types.ts",
"build": "go run ../cmd/go2ts -o src/types.ts && tsc",
"watch": "tsc --watch",
- "tailwind": "tailwindcss -i ./src/global.css -o ./src/tailwind.css",
+ "tailwind": "tailwindcss -i ./src/global.css -o ./dist/tailwind.css",
"test": "tsc && npm run test:playwright",
"test:playwright": "playwright test -c playwright-ct.config.ts"
},
"dependencies": {
"@xterm/addon-fit": "^0.10.0",
+ "@tailwindcss/cli": "^4.1.10",
"@xterm/xterm": "^5.5.0",
"dompurify": "^3.2.6",
"jsdom": "^26.1.0",
@@ -34,11 +35,11 @@
"marked": "^15.0.7",
"mermaid": "^11.6.0",
"monaco-editor": "^0.52.2",
- "sanitize-html": "^2.15.0"
+ "sanitize-html": "^2.15.0",
+ "tailwindcss": "^4.1.10"
},
"devDependencies": {
"@sand4rt/experimental-ct-web": "^1.51.1",
- "@tailwindcss/cli": "^4.1.10",
"@types/marked": "^5.0.2",
"@types/mocha": "^10.0.7",
"@types/node": "^22.13.14",
@@ -48,7 +49,6 @@
"esbuild": "^0.25.1",
"msw": "^2.7.5",
"prettier": "3.5.3",
- "tailwindcss": "^4.1.10",
"typescript": "^5.8.3",
"vite": "^6.3.4",
"vite-plugin-web-components-hmr": "^0.1.3"