Is it possible to add TailwindCSS 3?

[Ghost295]

I tried to add it but I was not successful.
Running npm run watch with the added Tailwind CSS rules in a CSS file would break styling and not work.
If I tried to build the app it would show a strange error from the Tailwind config.

Has anyone tried to add Tailwindcss to this template?

[wallaceosmar]

Yes, but with the new update you need to add the tailwind.config.js and postcss.config.js in the root and in the packages/renderer

[theorib]

(updated) There is a more elegant way of doing this that doesn't involve maintaining two tailwind.config.js and postcss.config.js files.

Most of the steps below you would have to do in one way or another to set up any tailwind project and there are just a few tweaks that need doing.

Essentially, you need to give both your postcss.config.js and our tailwind.config.js(ts) absolute paths using node so that the compiler can find the right files.

1. As usual, first you need to install tailwindcss, postcss and autoprefixer as you would for a Vite project with tailwind:

npm install -D tailwindcss postcss autoprefixer

2. Create a tailwind.config.ts file in your packages/renderer folder. If you where following tailwind's instructions, you would normally automate this step by running npx tailwindcss init -p but we will do it manually here.

   You can customise this file to your hearts content, just notice how we have to use absolute paths for content, otherwise, from the way the project is built/compiled those paths would point to the root of your project and thus wouldn't work as intended:

import { join, dirname } from 'path';
import { fileURLToPath } from 'node:url';
import type { Config } from 'tailwindcss';

const PACKAGE_ROOT = dirname(fileURLToPath(import.meta.url));

export default {
  content: [
    join(PACKAGE_ROOT, './index.html'),
    join(PACKAGE_ROOT, './src/**/*.{js,ts,jsx,tsx,vue}'),
  ],
  theme: {
    extend: {},
  },
} satisfies Config;

3. Create a postcss.config.js file in your packages/renderer folder. Notice how you have to use absolute paths to define which tailwind config file should be used by postcss

import { join, dirname } from 'path';
import { fileURLToPath } from 'node:url';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

const PACKAGE_ROOT = dirname(fileURLToPath(import.meta.url));

export default {
  plugins: [tailwindcss(join(PACKAGE_ROOT, './tailwind.config.ts')), autoprefixer],
};

4. As usual for any tailwind installation, create an index.css file (or whatever you want to call it). This can be anywhere in your renderer directory, I'm adding it to renderer/src and add the standard tailwind directives to it:

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

5. Import that index.css file into the relevant place in your project as you would with any other tailwind installation. I'm using React so I would just import it to my main.tsx file but with this current boilerplate using Vue and it's current structure, you could import it directly into your App.vue or simply add it to packages/renderer/index.html.

// inside the script tag of your App.vue file or in your main.tsx file
import '/@/index.css';

That's it, tailwind should now be working for your builds and dev setup with hot module replacement. This seems to be a more optimal way of setting up Tailwind with an Electron Vite project that uses this boilerplate.

[cawa-93]

Why did you put postcss config in vite.config.ts but not in the separate postcss.config.js ?

[theorib]

Why did you put postcss config in vite.config.ts but not in the separate postcss.config.js ?

You got me thinking and you were right! All that was needed was to set postcss.config.js to use the correct tailwind.config.ts file using absolute paths as well.
Otherwise postcss.config.js looks for the tailwind config in the root of the project no matter where you place the postcss config.

I updated the post above. It's an even better solution, thanks!