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:
Initialize Electron webback boilerplate (according to here):
git clone .git project cd project rm -rf .git
Install Vuejs:
yarn add --dev vue css-loader vue-loader vue-template-piler
Setting up webpack for Vuejs:
const { VueLoaderPlugin } = require("vue-loader"); module.exports = { module: { rules: [ { test: /\.vue$/, use: 'vue-loader' } ], plugins: [ new VueLoaderPlugin() ] } }
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>Wele</div> </template>
→ Works so far.
Install tailwindcss:
yarn add —-dev tailwindcss postcss-loader autoprefixer
Add tailwindcss to project:
src/renderer/index.js
:... import './assets/styles.css'; ...
src/assets/styles.css
:@tailwind base; @tailwind ponents; @tailwind utilities;
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' ] } ...
- Add
Test tailwindcss by modifying
App.vue
:<template> <div class="bg-blue-100">Wele</div> </template>
→ Failed: Background of "Wele" text should be blue, but isn't, text is still serif.
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:
Initialize Electron webback boilerplate (according to here):
git clone https://github./electron-userland/electron-webpack-quick-start.git project cd project rm -rf .git
Install Vuejs:
yarn add --dev vue css-loader vue-loader vue-template-piler
Setting up webpack for Vuejs:
const { VueLoaderPlugin } = require("vue-loader"); module.exports = { module: { rules: [ { test: /\.vue$/, use: 'vue-loader' } ], plugins: [ new VueLoaderPlugin() ] } }
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>Wele</div> </template>
→ Works so far.
Install tailwindcss:
yarn add —-dev tailwindcss postcss-loader autoprefixer
Add tailwindcss to project:
src/renderer/index.js
:... import './assets/styles.css'; ...
src/assets/styles.css
:@tailwind base; @tailwind ponents; @tailwind utilities;
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' ] } ...
- Add
Test tailwindcss by modifying
App.vue
:<template> <div class="bg-blue-100">Wele</div> </template>
→ Failed: Background of "Wele" text should be blue, but isn't, text is still serif.
1 Answer
Reset to default 9Outdated 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 remend using Vue-CLI instead, and use vue plugins along the way, such as electron and tailwind.
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
.Create a project with vue-cli:
vue create myproject
. Then
cd myproject
yarn install
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 withyarn electron:serve
.Thereafter, you can add the tailwindcss plugin via
vue add tailwind
. Along the installation, you’ll be prompted with the tailwind config generation, choosefull
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