Repository: tailwindlabs/tailwindcss (TypeScript)
Task: Bug Fix (2017-11-18 15:39:14+00:00)

Issue:
Border-radius preflight is always aplied
When I have a button: `<input type="button">` and apply the `rounded` class to it, it will still always be `border-radius: 0`.

The css that takes the highest priority is in the preflight: https://github.com/tailwindcss/tailwindcss/blob/be3f9d38505ff7be9e5f507c054c08d5cc221960/css/preflight.css#L538


Discussion:
Yeah, they have an element in the selector too.

This would be the best I think without fighting specificity and not increasing the size of utilities:
```css
input[type="button" i]:not([class*="rounded" i]),
input[type="submit" i]:not([class*="rounded" i]),
input[type="reset" i]:not([class*="rounded" i]),
input[type="file" i]:not([class*="rounded" i])::-webkit-file-upload-button,
button {
  border-radius: 0;
}
```
The ```!imporant``` config prevents me from things like this.
https://tailwindcss.com/docs/configuration#important
Or just remove the `input` tag from the selectors (so specificity will be the same as the utility), as I see normalize already does that when applying `-webkit-appearance: button`, so it should be well tested in a reset.
My solution was meant as a quick fix for you.
There are other places where problems with specitifity can occur.

https://github.com/tailwindcss/tailwindcss/blob/be3f9d38505ff7be9e5f507c054c08d5cc221960/css/preflight.css#L501-L504
https://github.com/tailwindcss/tailwindcss/blob/be3f9d38505ff7be9e5f507c054c08d5cc221960/css/preflight.css#L113-L117

I'll stick with important for my projects.

Patch:
diff --git a/css/preflight.css b/css/preflight.css
--- a/css/preflight.css
+++ b/css/preflight.css
@@ -535,11 +535,10 @@ fieldset {
  *
  * We can remove this when the reversion is in a normal Chrome release.
  */
-input[type="button" i],
-input[type="submit" i],
-input[type="reset" i],
-input[type="file" i]::-webkit-file-upload-button,
-button {
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
   border-radius: 0;
 }
 


Test patch:
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -535,11 +535,10 @@ fieldset {
  *
  * We can remove this when the reversion is in a normal Chrome release.
  */
-input[type="button" i],
-input[type="submit" i],
-input[type="reset" i],
-input[type="file" i]::-webkit-file-upload-button,
-button {
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
   border-radius: 0;
 }