Starter template for Electron + Svelte + TailwindCSS apps.
Based on Svelte + TailwindCSS 2.0 starter.
Features:
There's also a simple dark/light mode switch, and a surprise button 👇
In development mode (running npm run dev
/ yarn dev
), the CSS bundle includes all of TailwindCSS and weighs in at ~6.8MB. You don't want to deploy this to production.
In production mode (running npm run build
/ yarn build
), all the unused CSS styles are purged, dropping the bundle to a much more manageable size (~7KB in this case). However, I haven't yet found a way to stop Tailwind from purging dynamic Svelte classes (such as class:dark
or class:from-blue-700={$dark}
).
As a result, the production bundle won't contain such dynamic classes. To get around this, in tailwind.config.js
, under purge
, add an options
object with a safelist
array containing all the classes you wish to protect from purging:
purge: {
enabled: production,
content: [
'./src/**/*.html',
'./src/**/*.svelte',
],
options: {
safelist: [
'border-blue-300',
'border-orange-500',
'border-pink-100',
'border-pink-900',
'dark',
'from-blue-500',
'from-blue-700',
'from-yellow-200',
'text-pink-100',
'text-pink-900',
'to-blue-800',
'to-pink-300',
'to-purple-800',
'to-yellow-500',
],
}
},
Install the dependencies...
cd svelte-app
npm install
# or
yarn install
...then start Electron in development mode:
npm run electron:dev
# or
yarn electron:dev
To build for the current platform:
npm run electron:build
# or
yarn electron:build
Platform-specific builds:
# Mac
yarn electron:build:mac
# Windows
yarn electron:build:win
# Linux
yarn electron:build:linux
Follow these instructions to generate application icons for each platform (Mac/Windows/Linux).
First, install the electron-icon-maker utility globally.
Next, in your project folder, run the electron-icon-maker
command to create the icon sets:
electron-icon-maker --input=generic-app-icon.png
# Creates the following folders:
# ./icons/mac
# ./icons/png
# ./icons/win
If you want the icons
folder to be created inside another folder (such as src
), modify the command as follows:
electron-icon-maker --input=generic-app-icon.png --output=./src
I like to flatten the icon structure, so that all the icons are in ./icons
.
Finally, configure the icons for each platform in electron-builder.yml
.