Override default font on html

Hello I'm trying to override the default font because in the html it's using Nunito by default, I want to use Montserrat and what I did its adding this in my resources\css\app.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';


html {
    font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont;
}

The problem is that it doesnt override it because when I do npm run dev it adds the font but it also stills adding the default font. After the npm run dev command it adds 2 html on public\css\app.css

Keeps using the default Nunito font in line 29

html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
}

And then adds what i want at the end in the line 1168

html {
    font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont;
}

What am I doing wrong? My best guess is to override body on layout with a simple style.