nextron: Tailwind customization doesn't work

Trying to use Tailwind with Nextron, but customization isn’t working

Install/Run the /with-typescript-tailwindcss example https://github.com/saltyshiomix/nextron/tree/master/examples/with-typescript-tailwindcss
Try to use the already defined color accent-1 https://github.com/saltyshiomix/nextron/blob/master/examples/with-typescript-tailwindcss/renderer/tailwind.config.js#L7 in the code.

If I use it as a className , for instance here <span className='text-accent-1'>⚡ Electron ⚡</span>

The color is not taking any effect

If I try to apply it the css

html,
body {
  @apply bg-gray-900 text-accent-1;
}

I get the following error Screenshot 2021-03-03 at 19 32 38

Finally if I try to add any custom color following the instructions here https://tailwindcss.com/docs/customizing-colors

Screenshot 2021-03-03 at 20 56 13

It doesn’t work

The thing is, I have a Nextjs project using tailwind in this exact way and it works. That’s the main reason I’m opening this issue.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 15 (6 by maintainers)

Commits related to this issue

Merge pull request #165 from CreedDE/master allow custom tailwind configuration: related #156 — committed to saltyshiomix/nextron by saltyshiomix 3 years ago
examples: Bump tailwindcss from v2 to v3, related #156 #172 #174 #188 #209 #243 — committed to saltyshiomix/nextron by saltyshiomix 2 years ago

Most upvoted comments

@daniboomerang @Dnguye92 @CreedDE

Sorry for late reply.

Just updated tailwindcss examples (bump v2 => v3), and we can finally use @apply or any directives 👍

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {
      config: './renderer/tailwind.config.js',
    },
    autoprefixer: {},
  },
};

tailwind.config.js

const colors = require('tailwindcss/colors');

module.exports = {
  content: [
    './renderer/pages/**/*.{js,ts,jsx,tsx}',
    './renderer/components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    colors: {
      // use colors only specified
      white: colors.white,
      gray: colors.gray,
      blue: colors.blue,
    },
    extend: {},
  },
  plugins: [],
};

styles/globals.css

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

@layer base {
  body {
    @apply bg-gray-900 text-white;
  }
}

@layer components {
  .btn-blue {
    @apply text-white font-bold px-4 py-2 rounded bg-blue-600 hover:bg-blue-500;
  }
}

saltyshiomix on May 4, 2022

Merged #165 into master 😃

saltyshiomix on Apr 4, 2021

I think the issue has been resolved here https://github.com/saltyshiomix/nextron/pull/165/commits/3398f5fc78a53c722b75e92002a855164112a4dd

daniboomerang on Apr 4, 2021

Hi @saltyshiomix I can perfectly make work Nextjs with tailwind. The issue is related with Nextjs and Tailwind in the context of electron/nextron

As described, the issue is tailwind custom customization isn’t working in the official examples provided by Nextron https://github.com/saltyshiomix/nextron/tree/master/examples/with-typescript-tailwindcss

daniboomerang on Apr 4, 2021