[Bug]: Cannot get custom css to work

[Scott Harrison]

Contact Details

Just on here

What happened?

List what you are trying to do?

I'm trying to change the color of my sidebar but the custom css is not applying.
Also trying to use tailwind (did try removing tailwind piece but does not work still)

Note custom logo is working fine and see the style sheet in my sources but it's just not applying

Bug prevalence

Ever time I try to use it

AdminJS dependencies version

AdminJS 7.4.2
@adminjs/express 6.1.0

What browsers do you see the problem on?

Chrome, Safari

Relevant log output

No response

Relevant code that's giving you issues

adminJsOptions: {
        dashboard: {
          handler: async () => {

          },
          component: Components.Dashboard
        },
        branding: {
          companyName: 'Coflyt Admin',
          logo: "/logo.png",          
        },
        assets: {
          styles: ["/custom-adminjs.css"],
        },
}


custom-admin.css>

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


:root {
    --topbar-color: blue;
    --sidebar-bg-color: darkgray;
    --sidebar-color: blue;
    --sidebar-link-color: orange;
  }
  ​
  section[data-css="sidebar"] {
    background-color: var(--sidebar-bg-color) !important;
    color: var(--sidebar-color);
    border: none;
  }
  ​
  section[data-css="sidebar"] svg {
    fill: var(--sidebar-color) !important;
  }
  ​
  a[data-css="sidebar-logo"] {
    background-color: var(--sidebar-bg-color) !important;
  }
  ​
  section[data-css="sidebar-resources"] {
    background: var(--sidebar-bg-color) !important;
  }
  ​
  [data-css="sidebar"] section a {
    background: var(--sidebar-bg-color) !important;
    color: var(--sidebar-color);
  }
  ​
  [data-css="sidebar"] a:hover {
    color: var(--sidebar-link-color);
  }

[Rafał Dzięgielewski]

:root {
  --topbar-color: blue;
  --sidebar-bg-color: darkgray;
  --sidebar-color: blue;
  --sidebar-link-color: orange;
}

[data-css="sidebar-resources"] {
  background: var(--sidebar-bg-color) !important;
  color: var(--sidebar-color) !important;
  border: none;
}

This did work for me when I attempted to change sidebar's resources section background colors.

Tailwind won't work since the CSS file is not post-processed and is just served as is.

[Scott Harrison]

:root {
  --topbar-color: blue;
  --sidebar-bg-color: darkgray;
  --sidebar-color: blue;
  --sidebar-link-color: orange;
}

[data-css="sidebar-resources"] {
  background: var(--sidebar-bg-color) !important;
  color: var(--sidebar-color) !important;
  border: none;
}

This did work for me when I attempted to change sidebar's resources section background colors.

Tailwind won't work since the CSS file is not post-processed and is just served as is.

What version are you using? The latest?

[Rafał Dzięgielewski]

@scottrules44

Yes, it's currently at the latest version. You can see an example of modified CSS here: https://cloud.adminjs.co/app

The CSS file is public:
https://cloud.adminjs.co/css/overrides.css