I am using Electron Forge's vite-typescript plugin to build a desktop application. My css file uses tailwind and my .vite folder does have the correct css file. However, my app does not show any styling (neither in dev nor in production). I have followed the instructions here. If I remove tailwind and add traditional css styling, the dApp is able to render that. What could be the issue? Here is my file structure:
project
│ README.md
│ index.html
│ next.config.js
│ forge.config.ts
│ forge.env.d.ts
│ package.json
│ postcss.config.js
│ tailwind.config.js
│ tsconfig.json
│ vite.base.config.ts
│ vite.main.config.ts
│ vite.preload.config.ts
│ vite.renderer.config.ts
└─── public
│ │ image.jpg
│ │ index.css
└───src
│ _app.tsx
│ index.tsx
│ main.js
│ preload.js
│ renderer.ts
My tailwind.config.js file contains the following:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./index.html', "./src/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/typography'),
],
}
My postcss.config.js contains the following:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
My index.html file contains the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My dApp</title>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
I also import the css file in my index.tsx file import '/index.css';.