dark mode in tailwindcss with adonisjs project not working

I'm using TailwindCSS 2, vue 3, in an adonisjs project. I have a simple html button, which when clicked should toggle to dark mode on/off. If I use the tailwindcss cdn version, and set darkmode in the config in the html, everything works fine. If I use my css, it doesn't. I guess I'm missing some step.

My tailwind.config.js does have the darkMode: 'class' definition

    content: ["./resources/**/*.{edge,js,ts,jsx,tsx,vue}"],
    darkMode : 'class',
    options: {
      safelist: ['dark']
    },

I prepare the css using the command:

    npx tailwindcss -i resources/css/style.css -o resources/css/app.css

I load the asset using adonisjs assets

    <link href="{{asset('assets/css/app.css')}}" rel="stylesheet">

when I click in the button, I can see that the html tag now has the "dark" class, but nothing happens. The background does not change. The body tag has "dark:bg-slate-800" definition.

But like I said, if I use the cdn version, everything works.

Am I missing a configuration step?

I fixed my issue doing a few things:

• reinstalled the packages described here https://tailwindcss.com/docs/guides/adonisjs (maybe I had missed something)

• moved my css to app.css

• added an style entry point in webpack.congfig.js:

    Encore.addStyleEntry('style', './resources/css/app.css')
  

• now I load my css using:

      @entryPointStyles('style')
  

now when I run "npm run dev" I guess tailwind is run under the hood by webpack and everything is working