Tailwind CSS & Svelte (English)

As I said a few days ago I decided to focus on some more complex projects. The first is “GEST - Dashboard”. Bad enough name, but I’ll change it later. I need a tool to open web applications on offline pc. In my head each web application will be a folder containing all the files. I’ll use Electron in combination with Svelte and Tailwind. There are some interesting problems that I am running into. One of them is how to integrate TailwindCSS with Svelte.

I found some tutorials on the internet but a lot of them are out of date. There is one well done, by sarioglu: Using Svelte with Tailwindcss - A better approach. It is also worth taking a look at the dionysiusmarquis/svelte-tailwind-template repository. I was very inspired by these posts. These are the steps I take to integrate Svelte with Tailwind

I start from my MEMENTO - Svelte Electron Typescript. First I check which packages that need to be updated since the last time I worked on it:

npm outdated

So I update everything:

npm update

I want to update everything to the latest version (it’s a bit risky, I could break something accidentally, also because I haven’t implemented a reliable test system yet). I use npm install <packagename>@latest

npm install @rollup/plugin-commonjs@latest @rollup/plugin-node-resolve@latest electron@latest electron-reload@latest

This generates some errors and warnings:

src/electron/mainWindow.ts:38:9 - error TS2322: Type '{ enableRemoteModule: true; }' is not assignable to type 'WebPreferences'.
Object literal may only specify known properties, and 'enableRemoteModule' does not exist in type 'WebPreferences'.

(node:15840) electron: The default of nativeWindowOpen is deprecated and will change from false to true in Electron 15

I fix it by changing the mainWindow.ts module:

//...
let window = new BrowserWindow({
  ...settings,
  show: false,
  webPreferences: {
    nodeIntegration: false,
    contextIsolation: true,
    nativeWindowOpen: true,
    preload: path.join(__dirname, "preload.js")
  }
});
//...

Now it’s time to switch to Tailwind. I need some packages. To start TailwindCSS:

npm i -D tailwindcss

Then something to handle PostCSS:

npm i -D postcss postcss-load-config autoprefixer rollup-plugin-postcss

Once done I begin to configure the project to be able to use Tailwind in combination with Svelte and Electron. I need 2 additional files: tailwind.config.js and postcss.config.js. I create them:

tailwind.config.js:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js:

const plugins = [require('tailwindcss')]
module.exports = {
  plugins
}

Then I have to configure rollup to be able to manage PostCSS files. I modify the rollup.config.js by adding:

//...
import postcss from 'rollup-plugin-postcss';

//...

export default {
  //...
  plugins: [
    //...
    // To be able to import css files inside svelte `<script>`
    postcss({ extract: 'base.css' }),
    //...
  ]
  //...
}

This allows me to generate a base.css file dedicated to Tailwind. I have to tell the index.html file where to find it. So I add this line to the main html file:

<link rel='stylesheet' href='build/base.css'>

There is still one thing missing in the project: some style of TailwindCSS. I start by creating a css/tailwind.pcss file. I use a separate file to speed up testing when writing graphics components.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/** Modify your Tailwind layers etc. here **/
@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-orange {
    @apply py-2 px-4 bg-yellow-500 text-white font-semibold rounded-lg shadow-md hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-75;
  }
}

Then I import the file into App.svelte:

<script>
  import './css/tailwind.pcss'
</script>

Now I can use Tailwind, for example by adding the btn-orange class to the links:

<p>
  Visit the <a href="https://svelte.dev/tutorial" class="btn-orange">Svelte tutorial</a> to learn how to build Svelte apps.
</p>

Finally, the link to the repository is el3um4s/memento-svelte-electron-typescript. Instead on patreon.com/el3um4s there is my Patreon profile.