[DX] Usage TailwindCSS

[Amar-Gill]

I have a project where I am using @nuxtjs/tailwindcss and@nuxt/content modules. Plus the @nuxt-themes/typography layer.

When I have a button with type="submit" in my app, I noticed the background-color is being overwritten to transparent. I narrowed it down to the following rule:

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

I have prepared a minimal reproduction in Stackblitz:

https://stackblitz.com/edit/nuxt-starter-hbzcrc?file=app.vue

Furthermore, only background styles applied with tailwind are overwritten. In the reproduction you can see my custom css class does not get overwritten. There appears to be some type of conflict between tailwind module and nuxt typography styles.

Here is a more complete rule set applied to the button. The btn-primary styles are being overwritten:

element {
}
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
.normal-case {
  text-transform: none;
}
.btn-sm {
  height: 2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  min-height: 2rem;
  font-size: 0.875rem;
}
.btn-primary {
  --tw-border-opacity: 1;
  border-color: hsl(229.09 95.652% 63.922% / 1);
  border-color: hsl(var(--p) / 1);
  border-color: hsl(229.09 95.652% 63.922% / 1);
  border-color: hsl(var(--p) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(229.09 95.652% 63.922% / 1);
  background-color: hsl(var(--p) / 1);
  background-color: hsl(229.09 95.652% 63.922% / 1);
  background-color: hsl(var(--p) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(229.09 100% 92.784% / 1);
  color: hsl(var(--pc) / 1);
  color: hsl(229.09 100% 92.784% / 1);
  color: hsl(var(--pc) / var(--tw-text-opacity));
}