Repository: tailwindlabs/tailwindcss
Pull request #2633 (2020-10-21 02:39:44)

Update default border color and placeholder color in preflight
This PR updates the border color and placeholder color references in preflight to be in sync with the new color palette. I've opted to make placeholders auto reference gray-400 since we now ship multiple gray options and it's convenient if this automatically updates for people when they pull in a different gray. If they create their own grayscale they will have to override this but that would be the case no matter what.


Patch:
diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css
index 9bb5e5ee..bff5bb83 100644
--- a/src/plugins/css/preflight.css
+++ b/src/plugins/css/preflight.css
@@ -130,7 +130,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  color: #a0aec0;
+  color: theme('colors.gray.400', #a1a1aa);
 }
 
 button,
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 85633841..75bb13a8 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -95,7 +95,7 @@ module.exports = {
     },
     borderColor: (theme) => ({
       ...theme('colors'),
-      DEFAULT: theme('colors.gray.300', 'currentColor'),
+      DEFAULT: theme('colors.gray.200', 'currentColor'),
     }),
     borderOpacity: (theme) => theme('opacity'),
     borderRadius: {


Test patch:
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
index 102b52da..a47a1061 100644
--- a/__tests__/fixtures/tailwind-output-flagged.css
+++ b/__tests__/fixtures/tailwind-output-flagged.css
@@ -398,7 +398,7 @@ html {
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: #d4d4d8; /* 2 */
+  border-color: #e4e4e7; /* 2 */
 }
 
 /*
@@ -429,7 +429,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  color: #a0aec0;
+  color: #a1a1aa;
 }
 
 button,
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index ad4dcc6f..faa42704 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -398,7 +398,7 @@ html {
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: #d4d4d8; /* 2 */
+  border-color: #e4e4e7; /* 2 */
 }
 
 /*
@@ -429,7 +429,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  color: #a0aec0;
+  color: #a1a1aa;
 }
 
 button,
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
index 3dc1fcd6..8944c03f 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -398,7 +398,7 @@ html {
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: #d4d4d8; /* 2 */
+  border-color: #e4e4e7; /* 2 */
 }
 
 /*
@@ -429,7 +429,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  color: #a0aec0;
+  color: #a1a1aa;
 }
 
 button,
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 102b52da..a47a1061 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -398,7 +398,7 @@ html {
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: #d4d4d8; /* 2 */
+  border-color: #e4e4e7; /* 2 */
 }
 
 /*
@@ -429,7 +429,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  color: #a0aec0;
+  color: #a1a1aa;
 }
 
 button,