[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));
}

[Tahul]

Hey :)

I renamed this issue so we can track the usage of Typography with TailwindCSS.

I need to make a pass on that not only on Typography but on all themes, so this suits better as a naming.

Thank you so much for the reproduction!