Electron-vue: Using Tailwind-css

[MiloudiMohamed]

Hi is there a way to use tailwind-css within the electron-vue, I've followed the docs but i doesn't seem to work

[tom-milner]

Did You find a solution for this? I'm struggling myself.

[MiloudiMohamed]

Yes i did
first open .electron-vue/webpack.renderer.config.js and add postcss-loader like this

{
module: {
  rules: [
    //...
    test: /\.css$/,
    use: ['vue-style-loader', 'css-loader', 'postcss-loader']
 },

then install it yarn add -D postcss-loader

Now create postcss.config.js in the root of the project
write inside it
`php module.exports = { plugins: [ require("tailwindcss")("./tailwind.js"), require("autoprefixer")(), ] };

this should solve the problem

[ciarans]

Guys did you ever get @apply functions to work? I managed to get the inline styles working but not @apply to build my own styles

[u12206050]

@ciarans Have you been able to solve the @apply functions? I can't get them to work.

[shealan]

For anyone reading this in the future the info above helped me to get Tailwind working on Electron Vue, but you also need to do the following:

Create a tailwind.css file with the following code in it.

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

Import that into your main.js Vue script (not the App.vue)

import './assets/css/tailwind.css'

[cwilby]

@MiloudiMohamed thanks, that worked!

I didn't need to run yarn add -D postcss-loader as it is a dependency of vue-loader.