I'm developing a simple electron app. I'm using React with vite for the frontend of the app. After adding tailwindcss to the project the application shows just a white page when built as a production distribution. When I run it in dev mode everything works fine. Does anyone knows why it happens and how to fix it?
The tutorial I used to setup the project: https://www.youtube.com/watch?v=fP-371MN0Ck
Here is my vite.config.ts:
import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from 'tailwindcss';
import autoprefixer from "autoprefixer";
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
css: {
postcss: {
plugins: [tailwindcss(), autoprefixer()]
}
},
base: "./",
build: {
outDir: 'dist-react'
},
server: {
port: 5123,
strictPort: true
}
});package.json:
{
"name": "converter-app",
"private": true,
"version": "0.0.0",
"type": "module",
"main": "dist-electron/main.js",
"scripts": {
"dev": "npm-run-all --parallel dev:react dev:electron",
"dev:react": "vite",
"dev:electron": "npm run transpile:electron && cross-env NODE_ENV=development electron .",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview",
"transpile:electron": "tsc --project src/electron/tsconfig.json",
"dist:win": "npm run transpile:electron && npm run build && electron-builder --win --x64",
"dist:mac": "npm run transpile:electron && npm run build && electron-builder --mac --arm64",
"dist:linux": "npm run transpile:electron && npm run build && electron-builder --linux --x64"
},
"dependencies": {
"csv-parse": "^5.6.0",
"csv-stringify": "^6.5.2",
"mgrs": "^2.0.0",
"proj4": "^2.15.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^7.0.2",
"sqlite3": "^5.1.7",
"uuid": "^11.0.3",
"xlsx": "^0.18.5",
"zip-lib": "^1.0.5"
},
"devDependencies": {
"@eslint/js": "^9.15.0",
"@types/archiver": "^6.0.3",
"@types/node": "^22.10.1",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"cross-env": "^7.0.3",
"electron": "^33.2.1",
"electron-builder": "^25.1.8",
"eslint": "^9.15.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.14",
"globals": "^15.12.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.17",
"typescript": "~5.6.2",
"typescript-eslint": "^8.15.0",
"vite": "^6.0.1"
}
}tailwindcss.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{html,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};electron-builder.js
{
"appId": "com.converter-app",
"icon": "./icon.png",
"files": [
"dist-react",
"dist-electron",
"assets/**/**"
],
"extraResources": ["dist-electron/preload.cjs", "assets/**/**"],
"mac": {
"target": "dmg"
},
"linux": {
"target": "AppImage",
"category": "Utility"
},
"win": {
"target": [
"portable"
]
}
}