From 3aee85cb8c5d045d47d45b0f9ebd0c58d4593c42 Mon Sep 17 00:00:00 2001
From: alex <44968616+nderkim@users.noreply.github.com>
Date: Wed, 2 Nov 2022 09:08:39 +1100
Subject: [PATCH] Add unstyled prop

---
 packages/react-select/src/Select.tsx          |   6 +-
 .../__snapshots__/Async.test.tsx.snap         |  28 ++--
 .../AsyncCreatable.test.tsx.snap              |  28 ++--
 .../__snapshots__/Creatable.test.tsx.snap     |  28 ++--
 .../__snapshots__/Select.test.tsx.snap        |  28 ++--
 .../__snapshots__/StateManaged.test.tsx.snap  |  28 ++--
 .../react-select/src/components/Control.tsx   |  44 ++++---
 .../react-select/src/components/Group.tsx     |  31 +++--
 .../react-select/src/components/Input.tsx     |  25 ++--
 packages/react-select/src/components/Menu.tsx |  72 ++++++----
 .../src/components/MultiValue.tsx             |  69 ++++++----
 .../react-select/src/components/Option.tsx    |  58 ++++----
 .../src/components/Placeholder.tsx            |  17 ++-
 .../src/components/SingleValue.tsx            |  21 ++-
 .../src/components/containers.tsx             |  21 ++-
 .../src/components/indicators.tsx             |  90 ++++++++-----
 packages/react-select/src/styles.ts           |   5 +-
 .../ClassNamesWithTailwind.stories.tsx        |  67 ++++++++++
 .../stories/UnstyledWithTailwind.stories.tsx  | 124 ++++++++++++++++++
 storybook/stories/WithTailwind.stories.tsx    |  46 -------
 20 files changed, 548 insertions(+), 288 deletions(-)
 create mode 100644 storybook/stories/ClassNamesWithTailwind.stories.tsx
 create mode 100644 storybook/stories/UnstyledWithTailwind.stories.tsx
 delete mode 100644 storybook/stories/WithTailwind.stories.tsx

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index bae7541a37..5c6463ec4b 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -267,6 +267,8 @@ export interface Props<
   tabIndex: number;
   /** Select the currently focused option when the user presses tab */
   tabSelectsValue: boolean;
+  /** Remove all non-essential styles */
+  unstyled: boolean;
   /** The value of the select; reflected by the selected option */
   value: PropsValue<Option>;
   /** Sets the form attribute on the input */
@@ -315,6 +317,7 @@ export const defaultProps = {
   styles: {},
   tabIndex: 0,
   tabSelectsValue: true,
+  unstyled: false,
 };
 
 interface State<
@@ -1092,7 +1095,8 @@ export default class Select<
     key: Key,
     props: StylesProps<Option, IsMulti, Group>[Key]
   ) => {
-    const base = defaultStyles[key](props as any);
+    const { unstyled } = this.props;
+    const base = defaultStyles[key](props as any, unstyled);
     base.boxSizing = 'border-box';
     const custom = this.props.styles[key];
     return custom ? custom(base, props as any) : base;
diff --git a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
index 33600fcefb..869c353ee5 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
@@ -23,11 +23,6 @@ exports[`defaults - snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: hsl(0, 0%, 100%);
-  border-color: hsl(0, 0%, 80%);
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 1px;
   cursor: default;
   display: -webkit-box;
   display: -webkit-flex;
@@ -45,6 +40,11 @@ exports[`defaults - snapshot 1`] = `
   position: relative;
   -webkit-transition: all 100ms;
   transition: all 100ms;
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
 }
 
@@ -65,33 +65,33 @@ exports[`defaults - snapshot 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  padding: 2px 8px;
   -webkit-overflow-scrolling: touch;
   position: relative;
   overflow: hidden;
+  padding: 2px 8px;
   box-sizing: border-box;
 }
 
 .emotion-5 {
-  color: hsl(0, 0%, 50%);
   grid-area: 1/1/2/3;
+  color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
   box-sizing: border-box;
 }
 
 .emotion-6 {
-  margin: 2px;
-  padding-bottom: 2px;
-  padding-top: 2px;
   visibility: visible;
-  color: hsl(0, 0%, 20%);
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   display: inline-grid;
   grid-area: 1/1/2/3;
   grid-template-columns: 0 min-content;
+  margin: 2px;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  color: hsl(0, 0%, 20%);
   box-sizing: border-box;
 }
 
@@ -130,22 +130,22 @@ exports[`defaults - snapshot 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
+  width: 1px;
   background-color: hsl(0, 0%, 80%);
   margin-bottom: 8px;
   margin-top: 8px;
-  width: 1px;
   box-sizing: border-box;
 }
 
 .emotion-9 {
-  color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding: 8px;
   -webkit-transition: color 150ms;
   transition: color 150ms;
+  color: hsl(0, 0%, 80%);
+  padding: 8px;
   box-sizing: border-box;
 }
 
diff --git a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
index 33600fcefb..869c353ee5 100644
--- a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
@@ -23,11 +23,6 @@ exports[`defaults - snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: hsl(0, 0%, 100%);
-  border-color: hsl(0, 0%, 80%);
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 1px;
   cursor: default;
   display: -webkit-box;
   display: -webkit-flex;
@@ -45,6 +40,11 @@ exports[`defaults - snapshot 1`] = `
   position: relative;
   -webkit-transition: all 100ms;
   transition: all 100ms;
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
 }
 
@@ -65,33 +65,33 @@ exports[`defaults - snapshot 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  padding: 2px 8px;
   -webkit-overflow-scrolling: touch;
   position: relative;
   overflow: hidden;
+  padding: 2px 8px;
   box-sizing: border-box;
 }
 
 .emotion-5 {
-  color: hsl(0, 0%, 50%);
   grid-area: 1/1/2/3;
+  color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
   box-sizing: border-box;
 }
 
 .emotion-6 {
-  margin: 2px;
-  padding-bottom: 2px;
-  padding-top: 2px;
   visibility: visible;
-  color: hsl(0, 0%, 20%);
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   display: inline-grid;
   grid-area: 1/1/2/3;
   grid-template-columns: 0 min-content;
+  margin: 2px;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  color: hsl(0, 0%, 20%);
   box-sizing: border-box;
 }
 
@@ -130,22 +130,22 @@ exports[`defaults - snapshot 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
+  width: 1px;
   background-color: hsl(0, 0%, 80%);
   margin-bottom: 8px;
   margin-top: 8px;
-  width: 1px;
   box-sizing: border-box;
 }
 
 .emotion-9 {
-  color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding: 8px;
   -webkit-transition: color 150ms;
   transition: color 150ms;
+  color: hsl(0, 0%, 80%);
+  padding: 8px;
   box-sizing: border-box;
 }
 
diff --git a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
index 33600fcefb..869c353ee5 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
@@ -23,11 +23,6 @@ exports[`defaults - snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: hsl(0, 0%, 100%);
-  border-color: hsl(0, 0%, 80%);
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 1px;
   cursor: default;
   display: -webkit-box;
   display: -webkit-flex;
@@ -45,6 +40,11 @@ exports[`defaults - snapshot 1`] = `
   position: relative;
   -webkit-transition: all 100ms;
   transition: all 100ms;
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
 }
 
@@ -65,33 +65,33 @@ exports[`defaults - snapshot 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  padding: 2px 8px;
   -webkit-overflow-scrolling: touch;
   position: relative;
   overflow: hidden;
+  padding: 2px 8px;
   box-sizing: border-box;
 }
 
 .emotion-5 {
-  color: hsl(0, 0%, 50%);
   grid-area: 1/1/2/3;
+  color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
   box-sizing: border-box;
 }
 
 .emotion-6 {
-  margin: 2px;
-  padding-bottom: 2px;
-  padding-top: 2px;
   visibility: visible;
-  color: hsl(0, 0%, 20%);
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   display: inline-grid;
   grid-area: 1/1/2/3;
   grid-template-columns: 0 min-content;
+  margin: 2px;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  color: hsl(0, 0%, 20%);
   box-sizing: border-box;
 }
 
@@ -130,22 +130,22 @@ exports[`defaults - snapshot 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
+  width: 1px;
   background-color: hsl(0, 0%, 80%);
   margin-bottom: 8px;
   margin-top: 8px;
-  width: 1px;
   box-sizing: border-box;
 }
 
 .emotion-9 {
-  color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding: 8px;
   -webkit-transition: color 150ms;
   transition: color 150ms;
+  color: hsl(0, 0%, 80%);
+  padding: 8px;
   box-sizing: border-box;
 }
 
diff --git a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
index 11e1e4a4b2..d0dc6571da 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
@@ -23,11 +23,6 @@ exports[`snapshot - defaults 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: hsl(0, 0%, 100%);
-  border-color: hsl(0, 0%, 80%);
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 1px;
   cursor: default;
   display: -webkit-box;
   display: -webkit-flex;
@@ -45,6 +40,11 @@ exports[`snapshot - defaults 1`] = `
   position: relative;
   -webkit-transition: all 100ms;
   transition: all 100ms;
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
 }
 
@@ -65,33 +65,33 @@ exports[`snapshot - defaults 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  padding: 2px 8px;
   -webkit-overflow-scrolling: touch;
   position: relative;
   overflow: hidden;
+  padding: 2px 8px;
   box-sizing: border-box;
 }
 
 .emotion-5 {
-  color: hsl(0, 0%, 50%);
   grid-area: 1/1/2/3;
+  color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
   box-sizing: border-box;
 }
 
 .emotion-6 {
-  margin: 2px;
-  padding-bottom: 2px;
-  padding-top: 2px;
   visibility: visible;
-  color: hsl(0, 0%, 20%);
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   display: inline-grid;
   grid-area: 1/1/2/3;
   grid-template-columns: 0 min-content;
+  margin: 2px;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  color: hsl(0, 0%, 20%);
   box-sizing: border-box;
 }
 
@@ -130,22 +130,22 @@ exports[`snapshot - defaults 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
+  width: 1px;
   background-color: hsl(0, 0%, 80%);
   margin-bottom: 8px;
   margin-top: 8px;
-  width: 1px;
   box-sizing: border-box;
 }
 
 .emotion-9 {
-  color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding: 8px;
   -webkit-transition: color 150ms;
   transition: color 150ms;
+  color: hsl(0, 0%, 80%);
+  padding: 8px;
   box-sizing: border-box;
 }
 
diff --git a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
index d8ee569881..e992b60181 100644
--- a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
@@ -23,11 +23,6 @@ exports[`defaults > snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: hsl(0, 0%, 100%);
-  border-color: hsl(0, 0%, 80%);
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 1px;
   cursor: default;
   display: -webkit-box;
   display: -webkit-flex;
@@ -45,6 +40,11 @@ exports[`defaults > snapshot 1`] = `
   position: relative;
   -webkit-transition: all 100ms;
   transition: all 100ms;
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
 }
 
@@ -65,33 +65,33 @@ exports[`defaults > snapshot 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  padding: 2px 8px;
   -webkit-overflow-scrolling: touch;
   position: relative;
   overflow: hidden;
+  padding: 2px 8px;
   box-sizing: border-box;
 }
 
 .emotion-5 {
-  color: hsl(0, 0%, 50%);
   grid-area: 1/1/2/3;
+  color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
   box-sizing: border-box;
 }
 
 .emotion-6 {
-  margin: 2px;
-  padding-bottom: 2px;
-  padding-top: 2px;
   visibility: visible;
-  color: hsl(0, 0%, 20%);
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   display: inline-grid;
   grid-area: 1/1/2/3;
   grid-template-columns: 0 min-content;
+  margin: 2px;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  color: hsl(0, 0%, 20%);
   box-sizing: border-box;
 }
 
@@ -130,22 +130,22 @@ exports[`defaults > snapshot 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
+  width: 1px;
   background-color: hsl(0, 0%, 80%);
   margin-bottom: 8px;
   margin-top: 8px;
-  width: 1px;
   box-sizing: border-box;
 }
 
 .emotion-9 {
-  color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding: 8px;
   -webkit-transition: color 150ms;
   transition: color 150ms;
+  color: hsl(0, 0%, 80%);
+  padding: 8px;
   box-sizing: border-box;
 }
 
diff --git a/packages/react-select/src/components/Control.tsx b/packages/react-select/src/components/Control.tsx
index c00576d600..d8e85c3db0 100644
--- a/packages/react-select/src/components/Control.tsx
+++ b/packages/react-select/src/components/Control.tsx
@@ -31,23 +31,16 @@ export const css = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  isDisabled,
-  isFocused,
-  theme: { colors, borderRadius, spacing },
-}: ControlProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    isDisabled,
+    isFocused,
+    theme: { colors, borderRadius, spacing },
+  }: ControlProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'control',
   alignItems: 'center',
-  backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
-  borderColor: isDisabled
-    ? colors.neutral10
-    : isFocused
-    ? colors.primary
-    : colors.neutral20,
-  borderRadius: borderRadius,
-  borderStyle: 'solid',
-  borderWidth: 1,
-  boxShadow: isFocused ? `0 0 0 1px ${colors.primary}` : undefined,
   cursor: 'default',
   display: 'flex',
   flexWrap: 'wrap',
@@ -56,10 +49,23 @@ export const css = <
   outline: '0 !important',
   position: 'relative',
   transition: 'all 100ms',
-
-  '&:hover': {
-    borderColor: isFocused ? colors.primary : colors.neutral30,
-  },
+  ...(unstyled
+    ? {}
+    : {
+        backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
+        borderColor: isDisabled
+          ? colors.neutral10
+          : isFocused
+          ? colors.primary
+          : colors.neutral20,
+        borderRadius: borderRadius,
+        borderStyle: 'solid',
+        borderWidth: 1,
+        boxShadow: isFocused ? `0 0 0 1px ${colors.primary}` : undefined,
+        '&:hover': {
+          borderColor: isFocused ? colors.primary : colors.neutral30,
+        },
+      }),
 });
 
 const Control = <
diff --git a/packages/react-select/src/components/Group.tsx b/packages/react-select/src/components/Group.tsx
index 4d0c75413e..3daa87ca6f 100644
--- a/packages/react-select/src/components/Group.tsx
+++ b/packages/react-select/src/components/Group.tsx
@@ -47,12 +47,16 @@ export const groupCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { spacing },
-}: GroupProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
-  paddingBottom: spacing.baseUnit * 2,
-  paddingTop: spacing.baseUnit * 2,
-});
+>(
+  { theme: { spacing } }: GroupProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel =>
+  unstyled
+    ? {}
+    : {
+        paddingBottom: spacing.baseUnit * 2,
+        paddingTop: spacing.baseUnit * 2,
+      };
 
 const Group = <
   Option,
@@ -114,9 +118,10 @@ export const groupHeadingCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { spacing },
-}: GroupHeadingProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  { theme: { spacing } }: GroupHeadingProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'group',
   color: '#999',
   cursor: 'default',
@@ -124,9 +129,13 @@ export const groupHeadingCSS = <
   fontSize: '75%',
   fontWeight: 500,
   marginBottom: '0.25em',
-  paddingLeft: spacing.baseUnit * 3,
-  paddingRight: spacing.baseUnit * 3,
   textTransform: 'uppercase',
+  ...(unstyled
+    ? {}
+    : {
+        paddingLeft: spacing.baseUnit * 3,
+        paddingRight: spacing.baseUnit * 3,
+      }),
 });
 
 export const GroupHeading = <
diff --git a/packages/react-select/src/components/Input.tsx b/packages/react-select/src/components/Input.tsx
index cf5b02fe56..0d57982e80 100644
--- a/packages/react-select/src/components/Input.tsx
+++ b/packages/react-select/src/components/Input.tsx
@@ -37,20 +37,27 @@ export const inputCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  isDisabled,
-  value,
-  theme: { spacing, colors },
-}: InputProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
-  margin: spacing.baseUnit / 2,
-  paddingBottom: spacing.baseUnit / 2,
-  paddingTop: spacing.baseUnit / 2,
+>(
+  {
+    isDisabled,
+    value,
+    theme: { spacing, colors },
+  }: InputProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   visibility: isDisabled ? 'hidden' : 'visible',
-  color: colors.neutral80,
   // force css to recompute when value change due to @emotion bug.
   // We can remove it whenever the bug is fixed.
   transform: value ? 'translateZ(0)' : '',
   ...containerStyle,
+  ...(unstyled
+    ? {}
+    : {
+        margin: spacing.baseUnit / 2,
+        paddingBottom: spacing.baseUnit / 2,
+        paddingTop: spacing.baseUnit / 2,
+        color: colors.neutral80,
+      }),
 });
 
 const spacingStyle = {
diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index b694a7bddc..d5cc0a79ad 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -278,20 +278,28 @@ export const menuCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  placement,
-  theme: { borderRadius, spacing, colors },
-}: MenuProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    placement,
+    theme: { borderRadius, spacing, colors },
+  }: MenuProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'menu',
   [alignToControl(placement)]: '100%',
-  backgroundColor: colors.neutral0,
-  borderRadius: borderRadius,
-  boxShadow: '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)',
-  marginBottom: spacing.menuGutter,
-  marginTop: spacing.menuGutter,
   position: 'absolute',
   width: '100%',
   zIndex: 1,
+  ...(unstyled
+    ? {}
+    : {
+        backgroundColor: colors.neutral0,
+        borderRadius: borderRadius,
+        boxShadow:
+          '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)',
+        marginBottom: spacing.menuGutter,
+        marginTop: spacing.menuGutter,
+      }),
 });
 
 const PortalPlacementContext =
@@ -405,18 +413,25 @@ export const menuListCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  maxHeight,
-  theme: {
-    spacing: { baseUnit },
-  },
-}: MenuListProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    maxHeight,
+    theme: {
+      spacing: { baseUnit },
+    },
+  }: MenuListProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   maxHeight,
   overflowY: 'auto',
-  paddingBottom: baseUnit,
-  paddingTop: baseUnit,
   position: 'relative', // required for offset[Height, Top] > keyboard scroll
   WebkitOverflowScrolling: 'touch',
+  ...(unstyled
+    ? {}
+    : {
+        paddingBottom: baseUnit,
+        paddingTop: baseUnit,
+      }),
 });
 export const MenuList = <
   Option,
@@ -448,15 +463,22 @@ const noticeCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: {
-    spacing: { baseUnit },
-    colors,
-  },
-}: NoticeProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
-  color: colors.neutral40,
-  padding: `${baseUnit * 2}px ${baseUnit * 3}px`,
+>(
+  {
+    theme: {
+      spacing: { baseUnit },
+      colors,
+    },
+  }: NoticeProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   textAlign: 'center',
+  ...(unstyled
+    ? {}
+    : {
+        color: colors.neutral40,
+        padding: `${baseUnit * 2}px ${baseUnit * 3}px`,
+      }),
 });
 export const noOptionsMessageCSS = noticeCSS;
 export const loadingMessageCSS = noticeCSS;
diff --git a/packages/react-select/src/components/MultiValue.tsx b/packages/react-select/src/components/MultiValue.tsx
index ce83fcdce0..b0ee146141 100644
--- a/packages/react-select/src/components/MultiValue.tsx
+++ b/packages/react-select/src/components/MultiValue.tsx
@@ -40,27 +40,35 @@ export const multiValueCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { spacing, borderRadius, colors },
-}: MultiValueProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    theme: { spacing, borderRadius, colors },
+  }: MultiValueProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'multiValue',
-  backgroundColor: colors.neutral10,
-  borderRadius: borderRadius / 2,
   display: 'flex',
-  margin: spacing.baseUnit / 2,
   minWidth: 0, // resolves flex/text-overflow bug
+  ...(unstyled
+    ? {}
+    : {
+        backgroundColor: colors.neutral10,
+        borderRadius: borderRadius / 2,
+        margin: spacing.baseUnit / 2,
+      }),
 });
 
 export const multiValueLabelCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { borderRadius, colors },
-  cropWithEllipsis,
-}: MultiValueProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
-  borderRadius: borderRadius / 2,
-  color: colors.neutral80,
+>(
+  {
+    theme: { borderRadius, colors },
+    cropWithEllipsis,
+  }: MultiValueProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   fontSize: '85%',
   overflow: 'hidden',
   padding: 3,
@@ -68,26 +76,39 @@ export const multiValueLabelCSS = <
   textOverflow:
     cropWithEllipsis || cropWithEllipsis === undefined ? 'ellipsis' : undefined,
   whiteSpace: 'nowrap',
+  ...(unstyled
+    ? {}
+    : {
+        borderRadius: borderRadius / 2,
+        color: colors.neutral80,
+      }),
 });
 
 export const multiValueRemoveCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { spacing, borderRadius, colors },
-  isFocused,
-}: MultiValueProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    theme: { spacing, borderRadius, colors },
+    isFocused,
+  }: MultiValueProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   alignItems: 'center',
-  borderRadius: borderRadius / 2,
-  backgroundColor: isFocused ? colors.dangerLight : undefined,
   display: 'flex',
-  paddingLeft: spacing.baseUnit,
-  paddingRight: spacing.baseUnit,
-  ':hover': {
-    backgroundColor: colors.dangerLight,
-    color: colors.danger,
-  },
+  ...(unstyled
+    ? {}
+    : {
+        borderRadius: borderRadius / 2,
+        backgroundColor: isFocused ? colors.dangerLight : undefined,
+        paddingLeft: spacing.baseUnit,
+        paddingRight: spacing.baseUnit,
+        ':hover': {
+          backgroundColor: colors.dangerLight,
+          color: colors.danger,
+        },
+      }),
 });
 
 export interface MultiValueGenericProps<
diff --git a/packages/react-select/src/components/Option.tsx b/packages/react-select/src/components/Option.tsx
index 55a332a38c..57afddcc1c 100644
--- a/packages/react-select/src/components/Option.tsx
+++ b/packages/react-select/src/components/Option.tsx
@@ -39,39 +39,45 @@ export const optionCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  isDisabled,
-  isFocused,
-  isSelected,
-  theme: { spacing, colors },
-}: OptionProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    isDisabled,
+    isFocused,
+    isSelected,
+    theme: { spacing, colors },
+  }: OptionProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'option',
-  backgroundColor: isSelected
-    ? colors.primary
-    : isFocused
-    ? colors.primary25
-    : 'transparent',
-  color: isDisabled
-    ? colors.neutral20
-    : isSelected
-    ? colors.neutral0
-    : 'inherit',
   cursor: 'default',
   display: 'block',
   fontSize: 'inherit',
-  padding: `${spacing.baseUnit * 2}px ${spacing.baseUnit * 3}px`,
   width: '100%',
   userSelect: 'none',
   WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-
-  // provide some affordance on touch devices
-  ':active': {
-    backgroundColor: !isDisabled
-      ? isSelected
-        ? colors.primary
-        : colors.primary50
-      : undefined,
-  },
+  ...(unstyled
+    ? {}
+    : {
+        backgroundColor: isSelected
+          ? colors.primary
+          : isFocused
+          ? colors.primary25
+          : 'transparent',
+        color: isDisabled
+          ? colors.neutral20
+          : isSelected
+          ? colors.neutral0
+          : 'inherit',
+        padding: `${spacing.baseUnit * 2}px ${spacing.baseUnit * 3}px`,
+        // provide some affordance on touch devices
+        ':active': {
+          backgroundColor: !isDisabled
+            ? isSelected
+              ? colors.primary
+              : colors.primary50
+            : undefined,
+        },
+      }),
 });
 
 const Option = <
diff --git a/packages/react-select/src/components/Placeholder.tsx b/packages/react-select/src/components/Placeholder.tsx
index 95d90041e8..626d05c589 100644
--- a/packages/react-select/src/components/Placeholder.tsx
+++ b/packages/react-select/src/components/Placeholder.tsx
@@ -25,14 +25,19 @@ export const placeholderCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { spacing, colors },
-}: PlaceholderProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  { theme: { spacing, colors } }: PlaceholderProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'placeholder',
-  color: colors.neutral50,
   gridArea: '1 / 1 / 2 / 3',
-  marginLeft: spacing.baseUnit / 2,
-  marginRight: spacing.baseUnit / 2,
+  ...(unstyled
+    ? {}
+    : {
+        color: colors.neutral50,
+        marginLeft: spacing.baseUnit / 2,
+        marginRight: spacing.baseUnit / 2,
+      }),
 });
 
 const Placeholder = <
diff --git a/packages/react-select/src/components/SingleValue.tsx b/packages/react-select/src/components/SingleValue.tsx
index fe3258a705..042780006e 100644
--- a/packages/react-select/src/components/SingleValue.tsx
+++ b/packages/react-select/src/components/SingleValue.tsx
@@ -27,19 +27,26 @@ export const css = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  isDisabled,
-  theme: { spacing, colors },
-}: SingleValueProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    isDisabled,
+    theme: { spacing, colors },
+  }: SingleValueProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'singleValue',
-  color: isDisabled ? colors.neutral40 : colors.neutral80,
   gridArea: '1 / 1 / 2 / 3',
-  marginLeft: spacing.baseUnit / 2,
-  marginRight: spacing.baseUnit / 2,
   maxWidth: '100%',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
+  ...(unstyled
+    ? {}
+    : {
+        color: isDisabled ? colors.neutral40 : colors.neutral80,
+        marginLeft: spacing.baseUnit / 2,
+        marginRight: spacing.baseUnit / 2,
+      }),
 });
 
 const SingleValue = <
diff --git a/packages/react-select/src/components/containers.tsx b/packages/react-select/src/components/containers.tsx
index 4e88486498..b1f0b00246 100644
--- a/packages/react-select/src/components/containers.tsx
+++ b/packages/react-select/src/components/containers.tsx
@@ -78,20 +78,27 @@ export const valueContainerCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { spacing },
-  isMulti,
-  hasValue,
-  selectProps: { controlShouldRenderValue },
-}: ValueContainerProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    theme: { spacing },
+    isMulti,
+    hasValue,
+    selectProps: { controlShouldRenderValue },
+  }: ValueContainerProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   alignItems: 'center',
   display: isMulti && hasValue && controlShouldRenderValue ? 'flex' : 'grid',
   flex: 1,
   flexWrap: 'wrap',
-  padding: `${spacing.baseUnit / 2}px ${spacing.baseUnit * 2}px`,
   WebkitOverflowScrolling: 'touch',
   position: 'relative',
   overflow: 'hidden',
+  ...(unstyled
+    ? {}
+    : {
+        padding: `${spacing.baseUnit / 2}px ${spacing.baseUnit * 2}px`,
+      }),
 });
 export const ValueContainer = <
   Option,
diff --git a/packages/react-select/src/components/indicators.tsx b/packages/react-select/src/components/indicators.tsx
index fb636b5bf4..052cc13c90 100644
--- a/packages/react-select/src/components/indicators.tsx
+++ b/packages/react-select/src/components/indicators.tsx
@@ -69,24 +69,30 @@ const baseCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  isFocused,
-  theme: {
-    spacing: { baseUnit },
-    colors,
-  },
-}:
-  | DropdownIndicatorProps<Option, IsMulti, Group>
-  | ClearIndicatorProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    isFocused,
+    theme: {
+      spacing: { baseUnit },
+      colors,
+    },
+  }:
+    | DropdownIndicatorProps<Option, IsMulti, Group>
+    | ClearIndicatorProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'indicatorContainer',
-  color: isFocused ? colors.neutral60 : colors.neutral20,
   display: 'flex',
-  padding: baseUnit * 2,
   transition: 'color 150ms',
-
-  ':hover': {
-    color: isFocused ? colors.neutral80 : colors.neutral40,
-  },
+  ...(unstyled
+    ? {}
+    : {
+        color: isFocused ? colors.neutral60 : colors.neutral20,
+        padding: baseUnit * 2,
+        ':hover': {
+          color: isFocused ? colors.neutral80 : colors.neutral40,
+        },
+      }),
 });
 
 export const dropdownIndicatorCSS = baseCSS;
@@ -164,19 +170,26 @@ export const indicatorSeparatorCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  isDisabled,
-  theme: {
-    spacing: { baseUnit },
-    colors,
-  },
-}: IndicatorSeparatorProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    isDisabled,
+    theme: {
+      spacing: { baseUnit },
+      colors,
+    },
+  }: IndicatorSeparatorProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'indicatorSeparator',
   alignSelf: 'stretch',
-  backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
-  marginBottom: baseUnit * 2,
-  marginTop: baseUnit * 2,
   width: 1,
+  ...(unstyled
+    ? {}
+    : {
+        backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
+        marginBottom: baseUnit * 2,
+        marginTop: baseUnit * 2,
+      }),
 });
 
 export const IndicatorSeparator = <
@@ -210,18 +223,19 @@ export const loadingIndicatorCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  isFocused,
-  size,
-  theme: {
-    colors,
-    spacing: { baseUnit },
-  },
-}: LoadingIndicatorProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  {
+    isFocused,
+    size,
+    theme: {
+      colors,
+      spacing: { baseUnit },
+    },
+  }: LoadingIndicatorProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'loadingIndicator',
-  color: isFocused ? colors.neutral60 : colors.neutral20,
   display: 'flex',
-  padding: baseUnit * 2,
   transition: 'color 150ms',
   alignSelf: 'center',
   fontSize: size,
@@ -229,6 +243,12 @@ export const loadingIndicatorCSS = <
   marginRight: size,
   textAlign: 'center',
   verticalAlign: 'middle',
+  ...(unstyled
+    ? {}
+    : {
+        color: isFocused ? colors.neutral60 : colors.neutral20,
+        padding: baseUnit * 2,
+      }),
 });
 
 interface LoadingDotProps {
diff --git a/packages/react-select/src/styles.ts b/packages/react-select/src/styles.ts
index 55fca2a4fd..a28181567a 100644
--- a/packages/react-select/src/styles.ts
+++ b/packages/react-select/src/styles.ts
@@ -79,8 +79,9 @@ export interface StylesProps<
 }
 
 export const defaultStyles: {
-  [K in keyof StylesProps<unknown, boolean, GroupBase<unknown>>]: (
-    props: StylesProps<unknown, boolean, GroupBase<unknown>>[K]
+  [K in keyof StylesProps<any, any, any>]: (
+    props: StylesProps<unknown, boolean, GroupBase<unknown>>[K],
+    unstyled: boolean
   ) => CSSObjectWithLabel;
 } = {
   clearIndicator: clearIndicatorCSS,
diff --git a/storybook/stories/ClassNamesWithTailwind.stories.tsx b/storybook/stories/ClassNamesWithTailwind.stories.tsx
new file mode 100644
index 0000000000..1d0072ef13
--- /dev/null
+++ b/storybook/stories/ClassNamesWithTailwind.stories.tsx
@@ -0,0 +1,67 @@
+import '../styles/tailwind.css';
+
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import classNames from 'classnames';
+import * as React from 'react';
+import Select from 'react-select';
+
+import { Field } from '../components/field';
+import { defaultArgs } from '../data';
+
+export default {
+  title: 'Select/ClassNamesWithTailwind',
+  component: Select,
+  argTypes: {},
+} as ComponentMeta<typeof Select>;
+
+// This ensures that Emotion's styles are inserted before Tailwind's styles so that Tailwind classes have precedence over Emotion
+const EmotionCacheProvider = ({ children }: { children: React.ReactNode }) => {
+  const cache = React.useMemo(
+    () =>
+      createCache({
+        key: 'with-tailwind',
+        insertionPoint: document.querySelector('title')!,
+      }),
+    []
+  );
+
+  return <CacheProvider value={cache}>{children}</CacheProvider>;
+};
+
+const Template: ComponentStory<typeof Select> = ({
+  inputId = 'react-select',
+  ...props
+}) => {
+  return (
+    <EmotionCacheProvider>
+      <Field htmlFor={inputId} label="ClassNames With Tailwind">
+        <Select
+          inputId={inputId}
+          {...props}
+          classNames={{
+            control: ({ isDisabled, isFocused }) =>
+              classNames(
+                !isDisabled && isFocused && 'border-purple-800',
+                isFocused && 'shadow-[0_0_0_1px] shadow-purple-800',
+                isFocused && 'hover:border-purple-800'
+              ),
+            option: ({ isDisabled, isFocused, isSelected }) =>
+              classNames(
+                isSelected && 'bg-purple-800',
+                !isSelected && isFocused && 'bg-purple-300',
+                !isDisabled && isSelected && 'active:bg-purple-800',
+                !isDisabled && !isSelected && 'active:bg-purple-500'
+              ),
+          }}
+        />
+      </Field>
+    </EmotionCacheProvider>
+  );
+};
+
+export const ClassNamesWithTailwind = Template.bind({});
+ClassNamesWithTailwind.args = {
+  ...defaultArgs,
+};
diff --git a/storybook/stories/UnstyledWithTailwind.stories.tsx b/storybook/stories/UnstyledWithTailwind.stories.tsx
new file mode 100644
index 0000000000..807b44e1f4
--- /dev/null
+++ b/storybook/stories/UnstyledWithTailwind.stories.tsx
@@ -0,0 +1,124 @@
+import '../styles/tailwind.css';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import classNames from 'classnames';
+import * as React from 'react';
+import Select from 'react-select';
+
+import { Field } from '../components/field';
+import { defaultArgs } from '../data';
+
+export default {
+  title: 'Select/UnstyledWithTailwind',
+  component: Select,
+  argTypes: {},
+} as ComponentMeta<typeof Select>;
+
+const Template: ComponentStory<typeof Select> = ({
+  inputId = 'react-select',
+  ...props
+}) => {
+  return (
+    <Field htmlFor={inputId} label="Unstyled With Tailwind">
+      <Select
+        inputId={inputId}
+        {...props}
+        unstyled // Remove all non-essential styles
+        classNames={{
+          clearIndicator: ({ isFocused }) =>
+            classNames(
+              isFocused ? 'text-neutral-600' : 'text-neutral-200',
+              'p-2',
+              isFocused ? 'hover:text-neutral-800' : 'hover:text-neutral-400'
+            ),
+          // container: () => classNames(),
+          control: ({ isDisabled, isFocused }) =>
+            classNames(
+              isDisabled ? 'bg-neutral-50' : 'bg-white',
+              isDisabled
+                ? 'border-neutral-100'
+                : isFocused
+                ? 'border-purple-800'
+                : 'border-neutral-200',
+              'rounded',
+              'border-solid',
+              'border',
+              isFocused && 'shadow-[0_0_0_1px] shadow-purple-800',
+              isFocused ? 'hover:border-purple-800' : 'hover:border-neutral-300'
+            ),
+          dropdownIndicator: ({ isFocused }) =>
+            classNames(
+              isFocused ? 'text-neutral-600' : 'text-neutral-200',
+              'p-2',
+              isFocused ? 'hover:text-neutral-800' : 'hover:text-neutral-400'
+            ),
+          group: () => classNames('py-2'),
+          groupHeading: () => classNames('px-3'),
+          // indicatorsContainer: () => classNames(),
+          indicatorSeparator: ({ isDisabled }) =>
+            classNames(
+              isDisabled ? 'bg-neutral-100' : 'bg-neutral-200',
+              'my-2'
+            ),
+          input: () => classNames('m-0.5', 'py-0.5', 'text-neutral-800'),
+          loadingIndicator: ({ isFocused }) =>
+            classNames(
+              isFocused ? 'text-neutral-600' : 'text-neutral-200',
+              'p-2'
+            ),
+          loadingMessage: () => classNames('text-neutral-400', 'py-2', 'px-3'),
+          menu: () =>
+            classNames(
+              'bg-white',
+              'rounded',
+              'shadow-[0_0_0_1px_rgba(0,0,0,0.1)]',
+              'my-1'
+            ),
+          menuList: () => classNames('py-1'),
+          // menuPortal: () => classNames(),
+          multiValue: () => classNames('bg-neutral-100', 'rounded-sm', 'm-0.5'),
+          multiValueLabel: () => classNames('rounded-sm', 'text-neutral-800'),
+          multiValueRemove: ({ isFocused }) =>
+            classNames(
+              'rounded-sm',
+              isFocused && 'bg-red-500',
+              'px-1',
+              'hover:bg-red-500',
+              'hover:text-red-800'
+            ),
+          noOptionsMessage: () =>
+            classNames('text-neutral-400', 'py-2', 'px-3'),
+          option: ({ isDisabled, isFocused, isSelected }) =>
+            classNames(
+              isSelected
+                ? 'bg-purple-800'
+                : isFocused
+                ? 'bg-purple-300'
+                : 'bg-transparent',
+              isDisabled
+                ? 'text-neutral-200'
+                : isSelected
+                ? 'text-white'
+                : 'text-inherit',
+              'py-2',
+              'px-3',
+              !isDisabled &&
+                (isSelected ? 'active:bg-purple-800' : 'active:bg-purple-500')
+            ),
+          placeholder: () => classNames('text-neutral-500', 'mx-0.5'),
+          singleValue: ({ isDisabled }) =>
+            classNames(
+              isDisabled ? 'text-neutral-400' : 'text-neutral-800',
+              'mx-0.5'
+            ),
+          valueContainer: () => classNames('py-0.5', 'px-2'),
+        }}
+      />
+    </Field>
+  );
+};
+
+export const UnstyledWithTailwind = Template.bind({});
+UnstyledWithTailwind.args = {
+  ...defaultArgs,
+};
diff --git a/storybook/stories/WithTailwind.stories.tsx b/storybook/stories/WithTailwind.stories.tsx
deleted file mode 100644
index 1239b932d9..0000000000
--- a/storybook/stories/WithTailwind.stories.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import '../styles/tailwind.css';
-
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import * as React from 'react';
-import Select from 'react-select';
-
-import { Field } from '../components/field';
-import { defaultArgs } from '../data';
-
-export default {
-  title: 'Select/WithTailwind',
-  component: Select,
-  argTypes: {},
-} as ComponentMeta<typeof Select>;
-
-const Template: ComponentStory<typeof Select> = ({
-  inputId = 'react-select',
-  ...props
-}) => {
-  return (
-    <Field htmlFor={inputId}>
-      <Select
-        inputId={inputId}
-        {...props}
-        // TODO
-        styles={{
-          valueContainer: (base, { hasValue }) => {
-            return {
-              ...base,
-              backgroundColor: hasValue ? 'red' : 'blue',
-            };
-          },
-        }}
-        classNames={{
-          valueContainer: ({ hasValue }) =>
-            hasValue ? 'bg-green-200' : 'bg-blue-200',
-        }}
-      />
-    </Field>
-  );
-};
-
-export const WithTailwind = Template.bind({});
-WithTailwind.args = {
-  ...defaultArgs,
-};