How to use Tailwind and Shadcn with Electron

I have been experimenting recently with ElectronJS, and have wanted a nice solution for the styling side. With my latest projects I have been implementing Tailwind and Shadcn with allows quick building of some nice, simple looking components.

If you don't want to do it yourself and would just like a template to start you off then you can find that here.

Vite Template

However if you would like to do it from scratch then here are the steps I took. As with everything development related there are probably many ways to do this.

Documentation is pretty thin on the ground when it comes to using Electron-vite with Tailwind and shadcn, so after failing to get it working a few times, I thought I would explain what did work for me eventually in the hope it will help someone else or even myself in future when i refer back to this post.

Firstly I used a vite based template

This is a template I saw in the Electron docs and was suggested as a vite based template. I picked up the forked version which is modified for React instead of Vue. Check it out, you can use another vite based template if you wish but I cannot promise the same result.

So without further ado, with your fresh new project. How do you go about getting Tailwind and shadcn to play nice with it?

Fork, clone and install to your file system.

Check it works as expected:

The Tailwind Part

Relevant Tailwind Docs

Firstly run the following two commands:

bun add -D tailwindcss postcss autoprefixer

bunx tailwindcss init

You should now have a tailwind.config.js file in your project root.

/** @type {import('tailwindcss').Config} */ 
module.exports = { 
	content: ["./src/**/*.{html,js}"], 
	theme: { 
		extend: {}, 
	}, 
	plugins: [], 
}

However, this will not work, the content array will be searching the wrong area, so this will need to modified with the following to scan the correct Electron folders:

/** @type {import('tailwindcss').Config} */ 
module.exports = { 
	content:["./packages/renderer/index.html","./packages/renderer/src/**/*.{js,ts,jsx,tsx}"], 
	theme: { 
		extend: {}, 
	}, 
	plugins: [], 
}

Or make sure it is targeting the correct renderer folder if you have a different/modified template.

Also create a postcss.config.js file in the root of your project. Add the following to the file:

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  };

Next add the following to your main entry point CSS file. For me in this template, it is

App.css

@tailwind base; 
@tailwind components; 
@tailwind utilities;

Tailwind should work as intended now. Test it out to see if it works.

Adding Shadcn

This bit is slightly trickier, if you want to use the shadcn CLI then follow these steps. Otherwise you can copy/paste components as you please and integrate them as you wish.

With that in mind continue on.

The base docs for this installation is using the CLI instructions from: Shadcn

First init Shadcn

bunx --bun shadcn-ui@latest init

You have to be careful with the settings now, as the wrong paths will cause issues:

Here is what I used:

The key things to note are:

Globals CSS: This is the path to the global css file in your project. For me it was the App.css file.

packages/renderer/src/App.css

Component Path: This is the path to the components folder in your project. For me it was the renderer folder.

packages/renderer/src/components

Utils Path: This will be a relative path, the components will use this for the cn function.

/@/components/lib/utils

But if you need to edit it later, its possible - just go into the newly generated components.json in your root folder.

Here are the contents of mine:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "packages/renderer/src/App.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "packages/renderer/src/components",
    "utils": "/@/lib/utils"
  }
}

Doing this will reset your tailwind.config.ts to the defaults so you will need to add back the content as before:

content: ["./packages/renderer/index.html","./packages/renderer/src/**/*.{js,ts,jsx,tsx}"],

Now you should be able to use shadcn within your electron project, test it out:

I installed a button and the sonner components:

e.g.

bunx --bun shadcn-ui@latest add button

I hope this helps to get Electron running with Tailwind and Shadcn. Get building!

Potential Issues

Class Name errors

Class names might give you errors due to the linting rules in the template. You can disable these in the eslintrc.json file in the renderer folder. Add the following:

"rules": {
    "react/prop-types": "off"
  },

Pushing to Github

You might get errors when pushing to github

You can remove the test for this in .nano-staged.mjs. I just commented it out for now.

 // "*.{js,mjs,cjs,ts,mts,cts,tsx}": "eslint --cache --fix",

Helpful Links

Loading post…