Creating an Electron app with Vuejs, Webpack and tailwindcss

user_9519322 0
Viewed 3755

I try to get an Electron app running with webpack, Vuejs and tailwindcss, starting with the electron-webpack template package and adding Vuejs and tailwindcss afterwards, but tailwindcss doesn't work.

There is this equivalent thread on SO, but the solution mentioned there uses electron-vue, which has over 200 open issues and doesn't seems to be maintained anymore.

Does anybody has an idea what went wrong here? I proceeded as follows:

  1. Initialize Electron webback boilerplate (according to here):

    git clone https://github.com/electron-userland/electron-webpack-quick-start.git project
cd project
rm -rf .git

  2. Install Vuejs:

    yarn add --dev vue css-loader vue-loader vue-template-compiler

  3. Setting up webpack for Vuejs:

    const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ],
        plugins: [
            new VueLoaderPlugin()
        ]
    }
}

  4. Test Vuejs by modifying src/renderer/index.js to:

    'use strict';
import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    render(h) {
        return h(App)
    }
})

    and adding src/renderer/App.vue:

    <template>
    <div>Welcome</div>
</template>

    → Works so far.

  5. Install tailwindcss:

    yarn add —-dev tailwindcss postcss-loader autoprefixer

  6. Add tailwindcss to project:

    • src/renderer/index.js: 
      ...
import './assets/styles.css';
...
    • src/assets/styles.css: 
      @tailwind base;
@tailwind components;
@tailwind utilities;

  7. Include postcss-loader to webpack:

    • Add postcss.config.js: 
      const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};
    • Modify webpack.config.js: 
      ...
module.exports = {
    module: {
        rules: [
            ...,
            {
                test: /\.css$/,
                use: [
                'vue-style-loader',
                { loader: 'css-loader', options: { importLoaders: 1 } },
                'postcss-loader'
                ]
            }
    ...

  8. Test tailwindcss by modifying App.vue:

    <template>
    <div class="bg-blue-100">Welcome</div>
</template>

    → Failed: Background of "Welcome" text should be blue, but isn't, text is still serif.

electron tailwind-css vue.js webpack javascript
2 Answers

Outdated packages/plugins/repos are mostly developer's dilemma. There could be other choices out there that is being maintained regularly, but what if we can’t find something to meet our needs… ¯_(ツ)_/¯

Anyway, I recommend using Vue-CLI instead, and use vue plugins along the way, such as electron and tailwind.

  1. Vue-CLI uses webpack under the hood, by adding/configuring your vue.config.js. You can go ahead and install it: yarn global add @vue/cli.

  2. Create a project with vue-cli: vue create myproject. Then

cd myproject
yarn install

  1. Add Vue CLI Plugin Electron Builder plugin, that will build your VueJS app as a desktop app. Install with vue add electron-builder. Choose electron version. And test run with yarn electron:serve.

  2. Thereafter, you can add the tailwindcss plugin via vue add tailwind. Along the installation, you’ll be prompted with the tailwind config generation, choose full so you can test everything after, then customize later.

Following all their installation process, and leave all the defaults as is, try to test if the tailwindcss is working:

/* in App.vue */

<template>
  <div id="app" class="flex p-5">Test</div>
</template>

<script>
export default {
  name: 'app',
}
</script>

<style>
body, html {
  @apply bg-white;
}
</style>

finally with: yarn electron:serve

user_9570750
user_183550450
Related