diff --git a/.changeset/weak-roses-decide.md b/.changeset/weak-roses-decide.md
new file mode 100644
index 0000000000..1813fa1734
--- /dev/null
+++ b/.changeset/weak-roses-decide.md
@@ -0,0 +1,6 @@
+---
+'react-select': minor
+'@react-select/docs': patch
+---
+
+Add classNames API and unstyled prop
diff --git a/docs/examples/Experimental.tsx b/docs/examples/Experimental.tsx
index 552132bcd2..7bc4a0e90f 100644
--- a/docs/examples/Experimental.tsx
+++ b/docs/examples/Experimental.tsx
@@ -123,6 +123,7 @@ const Group = (props: GroupProps<DateOption, false>) => {
   const {
     Heading,
     getStyles,
+    getClassNames,
     children,
     label,
     headingProps,
@@ -136,6 +137,7 @@ const Group = (props: GroupProps<DateOption, false>) => {
         selectProps={selectProps}
         theme={theme}
         getStyles={getStyles}
+        getClassNames={getClassNames}
         cx={cx}
         {...headingProps}
       >
diff --git a/docs/index.css b/docs/index.css
index e0fc48962c..27281e215c 100644
--- a/docs/index.css
+++ b/docs/index.css
@@ -15,7 +15,10 @@ body {
 }
 p > a,
 p > a:hover,
-p > a:visited {
+p > a:visited,
+li > a,
+li > a:hover,
+li > a:visited {
   color: #2684ff;
 }
 code {
diff --git a/docs/markdown/renderer.tsx b/docs/markdown/renderer.tsx
index 2bd09d27c4..f2c4202570 100644
--- a/docs/markdown/renderer.tsx
+++ b/docs/markdown/renderer.tsx
@@ -105,8 +105,7 @@ const Heading = (props: HeadingProps) => {
     store.add(nodeKey, { key: nodeKey, label, level, path: `#${slug}` });
   }
   const css = {
-    marginTop: 0,
-    '&:not(:first-of-type)': { marginTop: 30 },
+    '&:first-child': { marginTop: 0 },
   };
 
   return linkify ? (
diff --git a/docs/pages/styles/index.tsx b/docs/pages/styles/index.tsx
index ba6754c518..e113c6e997 100644
--- a/docs/pages/styles/index.tsx
+++ b/docs/pages/styles/index.tsx
@@ -26,146 +26,128 @@ export default function Styles() {
       {md`
     # Styles
 
-    React-Select offers a flexible, light-weight styling framework which is
-    a thin abstraction over simple javascript objects using
-    [emotion](https://emotion.sh/).
+    React Select offers 3 main APIs for styling:
+
+    - [The styles prop](#the-styles-prop)
+    - [The classNames prop](#the-classnames-prop)
+    - [The classNamePrefix prop](#the-classnameprefix-prop)
+
+    ## The styles prop
+
+    The recommended way to provide custom styles to \`react-select\` is to use the \`styles\` prop.
+    \`styles\` takes an object with keys to represent the various [inner components](#inner-components) that \`react-select\` is made up of.
+    Each inner component takes a callback function with the following signature:
 
     ~~~jsx
-    /**
-     * @param {Object} provided -- the component's default styles
-     * @param {Object} state -- the component's current state e.g. \`isFocused\`
-     * @returns {Object}
-     */
-    function styleFn(provided, state) {
-      return { ...provided, color: state.isFocused ? 'blue' : 'red' };
-    }
+    <Select
+      styles={{
+        control: (baseStyles, state) => ({
+          ...baseStyles,
+          borderColor: state.isFocused ? 'grey' : 'red',
+        }),
+      }}
+    />
     ~~~
 
-    ## Style Object
-
-    Each component is keyed, and ships with default styles. The component's
-    default style object is passed as the first argument to the function
-    when it's resolved.
-
-    The second argument is the current state of the select, features like
-    \`isFocused\`, \`isSelected\` etc. allowing you to
-    implement dynamic styles for each of the components.
-
-    ###### Style Keys
-
-    - \`clearIndicator\`
-    - \`container\`
-    - \`control\`
-    - \`dropdownIndicator\`
-    - \`group\`
-    - \`groupHeading\`
-    - \`indicatorsContainer\`
-    - \`indicatorSeparator\`
-    - \`input\`
-    - \`loadingIndicator\`
-    - \`loadingMessage\`
-    - \`menu\`
-    - \`menuList\`
-    - \`menuPortal\`
-    - \`multiValue\`
-    - \`multiValueLabel\`
-    - \`multiValueRemove\`
-    - \`noOptionsMessage\`
-    - \`option\`
-    - \`placeholder\`
-    - \`singleValue\`
-    - \`valueContainer\`
-
-    ## Provided Styles and State
-
-    Spreading the provided styles into your returned object lets you extend it
-    however you like while maintaining existing styles. Alternatively, you
-    can omit the provided styles and completely take control of the component's styles.
+    The first argument is an object with the base styles. Spreading the base styles into your returned object lets you extend it however you like while maintaining existing styles. Alternatively, you can omit the provided styles and completely take control of the component's styles.
+
+    The second argument is the current state (features like \`isFocused\`, \`isSelected\` etc). This allows you to implement dynamic styles for each of the components.
+
+    ## The classNames prop
+
+    As of version \`5.7.0\` of \`react-select\` you can now use the \`classNames\` prop for styling. Note: this is not to be confused with the \`className\` prop, which will add a class to the component.
+
+    \`classNames\` takes an object with keys to represent the various [inner components](#inner-components) that \`react-select\` is made up of.
+    Each inner component takes a callback function with the following signature:
 
     ~~~jsx
-    const customStyles = {
-      option: (provided, state) => ({
-        ...provided,
-        borderBottom: '1px dotted pink',
-        color: state.isSelected ? 'red' : 'blue',
-        padding: 20,
-      }),
-      control: () => ({
-        // none of react-select's styles are passed to <Control />
-        width: 200,
-      }),
-      singleValue: (provided, state) => {
-        const opacity = state.isDisabled ? 0.5 : 1;
-        const transition = 'opacity 300ms';
-
-        return { ...provided, opacity, transition };
-      }
-    }
-
-      const App = () => (
-        <Select
-          styles={customStyles}
-          options={...}
-        />
-      );
-      ~~~
+    <Select
+      classNames={{
+        control: (state) =>
+          state.isFocused ? 'border-red-600' : 'border-grey-300',
+      }}
+    />
+    ~~~
+
+    ### Note on CSS specificity
+
+    If you are using the \`classNames\` API and you are trying to override some base styles with the same level of specificity, you must ensure that your provided styles are declared later than the styles from React Select (e.g. the \`link\` or \`style\` tag in the head of your HTML document) in order for them to take precedence.
+
+    For an example on how you might want to do this, see the [Storybook example here](https://github.com/JedWatson/react-select/blob/master/storybook/stories/ClassNamesWithTailwind.stories.tsx).
+
+    ## The unstyled prop
 
+    If you are trying to style everything from scratch you can use the \`unstyled\` prop. This removes all the presentational styles from React Select (leaving some important functional styles, like those for menu positioning and input width in multi select).
 
-    ## Select Props
-    In the second argument \`state\`, you have access to \`selectProps\` which will allow you to gain access to
-    your own arguments passed into the \`Select\` body.
+    This will make it easier to completely specify your own \`styles\` _or_ \`classNames\` to control the look of React Select, without having to specifically override the default theme we apply.
+
+    ## Inner components
+
+    <details>
+      <summary>See list of keys for all of React Select's inner components</summary>
+      <ul>
+        <li>clearIndicator</li>
+        <li>container</li>
+        <li>control</li>
+        <li>dropdownIndicator</li>
+        <li>group</li>
+        <li>groupHeading</li>
+        <li>indicatorsContainer</li>
+        <li>indicatorSeparator</li>
+        <li>input</li>
+        <li>loadingIndicator</li>
+        <li>loadingMessage</li>
+        <li>menu</li>
+        <li>menuList</li>
+        <li>menuPortal</li>
+        <li>multiValue</li>
+        <li>multiValueLabel</li>
+        <li>multiValueRemove</li>
+        <li>noOptionsMessage</li>
+        <li>option</li>
+        <li>placeholder</li>
+        <li>singleValue</li>
+        <li>valueContainer</li>
+      </ul>
+    </details>
+
+    ## The classNamePrefix prop
+
+    If you provide the \`classNamePrefix\` prop to React Select, all inner elements will be given a className with the provided prefix.
+
+    Given the following JSX:
 
     ~~~jsx
-    const customStyles = {
-      menu: (provided, state) => ({
-        ...provided,
-        width: state.selectProps.width,
-        borderBottom: '1px dotted pink',
-        color: state.selectProps.menuColor,
-        padding: 20,
-      }),
-
-      control: (_, { selectProps: { width }}) => ({
-        width: width
-      }),
-
-      singleValue: (provided, state) => {
-        const opacity = state.isDisabled ? 0.5 : 1;
-        const transition = 'opacity 300ms';
-
-        return { ...provided, opacity, transition };
-      }
-    }
-
-      const App = () => (
-        <Select
-          styles={customStyles}
-          width='200px'
-          menuColor='red'
-          options={...}
-        />
-      );
-      ~~~
+    <Select
+      {...props}
+      className="react-select-container"
+      classNamePrefix="react-select"
+    />
+    ~~~
+
+    ...the DOM structure is similar to this:
+
+    ~~~html
+    <div class="react-select-container">
+      <div class="react-select__control">
+        <div class="react-select__value-container">...</div>
+        <div class="react-select__indicators">...</div>
+      </div>
+      <div class="react-select__menu">
+        <div class="react-select__menu-list">
+          <div class="react-select__option">...</div>
+        </div>
+      </div>
+    </div>
+    ~~~
+
+    ## Select props
+
+    In the \`state\` argument for both the \`styles\` and \`classNames\` API, you have access to \`selectProps\` which will allow you to gain access to your own arguments passed into the Select body.
+
+
 
-      ${(
-        <ExampleWrapper
-          label="Customised Styles for Single Select"
-          urlPath="docs/examples/StyledSingle.tsx"
-          raw={require('!!raw-loader!../../examples/StyledSingle.tsx')}
-        >
-          <StyledSingle />
-        </ExampleWrapper>
-      )}
 
-      ${(
-        <ExampleWrapper
-          label="Customised styles for Multi Select"
-          urlPath="docs/examples/StyledMulti.tsx"
-          raw={require('!!raw-loader!../../examples/StyledMulti.tsx')}
-        >
-          <StyledMulti />
-        </ExampleWrapper>
-      )}
 
     ## cx and custom Components
 
@@ -234,34 +216,6 @@ export default function Styles() {
       </ExampleWrapper>
     )}
 
-    ## Using classNames
-
-    If you provide the \`className\` prop to react-select, the SelectContainer will be given a className based on the provided value.
-
-    If you provide the \`classNamePrefix\` prop to react-select, all inner elements will be given a className
-    with the provided prefix.
-
-    For example, given \`className='react-select-container'\` and \`classNamePrefix="react-select"\`,
-    the DOM structure is similar to this:
-
-    ~~~html
-    <div class="react-select-container">
-      <div class="react-select__control">
-        <div class="react-select__value-container">...</div>
-        <div class="react-select__indicators">...</div>
-      </div>
-      <div class="react-select__menu">
-        <div class="react-select__menu-list">
-          <div class="react-select__option">...</div>
-        </div>
-      </div>
-    </div>
-    ~~~
-
-    While we encourage you to use the new Styles API, you still have the option of styling via CSS classes.
-    This ensures compatibility with [styled components](https://www.styled-components.com/),
-    [CSS modules](https://github.com/css-modules/css-modules) and other libraries.
-
     ## Overriding the theme
 
     The default styles are derived from a theme object, which you can mutate like \`styles\`.
@@ -292,6 +246,28 @@ export default function Styles() {
       </div>
     )}
 
+    ## Examples
+
+      ${(
+        <ExampleWrapper
+          label="Customised Styles for Single Select"
+          urlPath="docs/examples/StyledSingle.tsx"
+          raw={require('!!raw-loader!../../examples/StyledSingle.tsx')}
+        >
+          <StyledSingle />
+        </ExampleWrapper>
+      )}
+
+      ${(
+        <ExampleWrapper
+          label="Customised styles for Multi Select"
+          urlPath="docs/examples/StyledMulti.tsx"
+          raw={require('!!raw-loader!../../examples/StyledMulti.tsx')}
+        >
+          <StyledMulti />
+        </ExampleWrapper>
+      )}
+
     `}
     </Fragment>
   );
diff --git a/package.json b/package.json
index 1bc42ae121..9124282c7d 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "start": "cd docs && yarn start",
     "start:test": "cd docs && yarn start:test",
-    "build:docs": "cd docs && yarn build:docs",
+    "build:docs": "yarn --cwd=docs build:docs && yarn --cwd=storybook build && cp -r storybook/storybook-static docs/dist/storybook",
     "fresh": "rm -rf node_modules && yarn install",
     "test": "npm run test:jest && npm run test:cypress",
     "test:jest": "jest --coverage",
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 11076fc810..9a029f31b0 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -40,7 +40,12 @@ import {
 
 import { defaultComponents, SelectComponentsConfig } from './components/index';
 
-import { defaultStyles, StylesConfig, StylesProps } from './styles';
+import {
+  ClassNamesConfig,
+  defaultStyles,
+  StylesConfig,
+  StylesProps,
+} from './styles';
 import { defaultTheme, ThemeConfig } from './theme';
 
 import {
@@ -99,6 +104,10 @@ export interface Props<
    * This is useful when styling via CSS classes instead of the Styles API approach.
    */
   classNamePrefix?: string | null;
+  /**
+   * Provide classNames based on state for each inner component
+   */
+  classNames: ClassNamesConfig<Option, IsMulti, Group>;
   /** Close the select menu when the user selects an option */
   closeMenuOnSelect: boolean;
   /**
@@ -258,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 */
@@ -271,6 +282,7 @@ export const defaultProps = {
   backspaceRemovesValue: true,
   blurInputOnSelect: isTouchCapable(),
   captureMenuScroll: !isTouchCapable(),
+  classNames: {},
   closeMenuOnSelect: true,
   closeMenuOnScroll: false,
   components: {},
@@ -305,6 +317,7 @@ export const defaultProps = {
   styles: {},
   tabIndex: 0,
   tabSelectsValue: true,
+  unstyled: false,
 };
 
 interface State<
@@ -1046,6 +1059,7 @@ export default class Select<
       clearValue,
       cx,
       getStyles,
+      getClassNames,
       getValue,
       selectOption,
       setValue,
@@ -1058,6 +1072,7 @@ export default class Select<
       clearValue,
       cx,
       getStyles,
+      getClassNames,
       getValue,
       hasValue,
       isMulti,
@@ -1080,11 +1095,16 @@ 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;
   };
+  getClassNames = <Key extends keyof StylesProps<Option, IsMulti, Group>>(
+    key: Key,
+    props: StylesProps<Option, IsMulti, Group>[Key]
+  ) => this.props.classNames[key]?.(props as any);
   getElementId = (
     element:
       | 'group'
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 60534d0714..d8e85c3db0 100644
--- a/packages/react-select/src/components/Control.tsx
+++ b/packages/react-select/src/components/Control.tsx
@@ -7,6 +7,7 @@ import {
   CSSObjectWithLabel,
   GroupBase,
 } from '../types';
+import { getStyleProps } from '../utils';
 
 export interface ControlProps<
   Option = unknown,
@@ -30,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',
@@ -55,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 = <
@@ -68,30 +75,17 @@ const Control = <
 >(
   props: ControlProps<Option, IsMulti, Group>
 ) => {
-  const {
-    children,
-    cx,
-    getStyles,
-    className,
-    isDisabled,
-    isFocused,
-    innerRef,
-    innerProps,
-    menuIsOpen,
-  } = props;
+  const { children, isDisabled, isFocused, innerRef, innerProps, menuIsOpen } =
+    props;
   return (
     <div
       ref={innerRef}
-      css={getStyles('control', props)}
-      className={cx(
-        {
-          control: true,
-          'control--is-disabled': isDisabled,
-          'control--is-focused': isFocused,
-          'control--menu-is-open': menuIsOpen,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'control', {
+        control: true,
+        'control--is-disabled': isDisabled,
+        'control--is-focused': isFocused,
+        'control--menu-is-open': menuIsOpen,
+      })}
       {...innerProps}
     >
       {children}
diff --git a/packages/react-select/src/components/Group.tsx b/packages/react-select/src/components/Group.tsx
index cc3dee2d30..0e5bf154ec 100644
--- a/packages/react-select/src/components/Group.tsx
+++ b/packages/react-select/src/components/Group.tsx
@@ -1,9 +1,10 @@
 /** @jsx jsx */
 import { ComponentType, ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import { cleanCommonProps } from '../utils';
+import { cleanCommonProps, getStyleProps } from '../utils';
 
 import {
+  CommonProps,
   CommonPropsAndClassName,
   CSSObjectWithLabel,
   CX,
@@ -46,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,
@@ -62,9 +67,9 @@ const Group = <
 ) => {
   const {
     children,
-    className,
     cx,
     getStyles,
+    getClassNames,
     Heading,
     headingProps,
     innerProps,
@@ -73,16 +78,13 @@ const Group = <
     selectProps,
   } = props;
   return (
-    <div
-      css={getStyles('group', props)}
-      className={cx({ group: true }, className)}
-      {...innerProps}
-    >
+    <div {...getStyleProps(props, 'group', { group: true })} {...innerProps}>
       <Heading
         {...headingProps}
         selectProps={selectProps}
         theme={theme}
         getStyles={getStyles}
+        getClassNames={getClassNames}
         cx={cx}
       >
         {label}
@@ -101,6 +103,7 @@ interface GroupHeadingPropsDefinedProps<
   selectProps: Props<Option, IsMulti, Group>;
   theme: Theme;
   getStyles: GetStyles<Option, IsMulti, Group>;
+  getClassNames: CommonProps<Option, IsMulti, Group>['getClassNames'];
   cx: CX;
 }
 
@@ -115,19 +118,24 @@ export const groupHeadingCSS = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  theme: { spacing },
-}: GroupHeadingProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
+>(
+  { theme: { colors, spacing } }: GroupHeadingProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   label: 'group',
-  color: '#999',
   cursor: 'default',
   display: 'block',
-  fontSize: '75%',
-  fontWeight: 500,
-  marginBottom: '0.25em',
-  paddingLeft: spacing.baseUnit * 3,
-  paddingRight: spacing.baseUnit * 3,
-  textTransform: 'uppercase',
+  ...(unstyled
+    ? {}
+    : {
+        color: colors.neutral40,
+        fontSize: '75%',
+        fontWeight: 500,
+        marginBottom: '0.25em',
+        paddingLeft: spacing.baseUnit * 3,
+        paddingRight: spacing.baseUnit * 3,
+        textTransform: 'uppercase',
+      }),
 });
 
 export const GroupHeading = <
@@ -137,12 +145,10 @@ export const GroupHeading = <
 >(
   props: GroupHeadingProps<Option, IsMulti, Group>
 ) => {
-  const { getStyles, cx, className } = props;
   const { data, ...innerProps } = cleanCommonProps(props);
   return (
     <div
-      css={getStyles('groupHeading', props)}
-      className={cx({ 'group-heading': true }, className)}
+      {...getStyleProps(props, 'groupHeading', { 'group-heading': true })}
       {...innerProps}
     />
   );
diff --git a/packages/react-select/src/components/Input.tsx b/packages/react-select/src/components/Input.tsx
index 9b4e9e2ff1..0d57982e80 100644
--- a/packages/react-select/src/components/Input.tsx
+++ b/packages/react-select/src/components/Input.tsx
@@ -7,7 +7,7 @@ import {
   CSSObjectWithLabel,
   GroupBase,
 } from '../types';
-import { cleanCommonProps } from '../utils';
+import { cleanCommonProps, getStyleProps } from '../utils';
 
 export interface InputSpecificProps<
   Option = unknown,
@@ -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 = {
@@ -93,14 +100,12 @@ const Input = <
 >(
   props: InputProps<Option, IsMulti, Group>
 ) => {
-  const { className, cx, getStyles, value } = props;
+  const { cx, value } = props;
   const { innerRef, isDisabled, isHidden, inputClassName, ...innerProps } =
     cleanCommonProps(props);
-
   return (
     <div
-      className={cx({ 'input-container': true }, className)}
-      css={getStyles('input', props)}
+      {...getStyleProps(props, 'input', { 'input-container': true })}
       data-value={value || ''}
     >
       <input
diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index c49a0ed18f..d5cc0a79ad 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -20,6 +20,7 @@ import {
   getBoundingClientObj,
   getScrollParent,
   getScrollTop,
+  getStyleProps,
   normalizedHeight,
   scrollTo,
 } from '../utils';
@@ -277,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 =
@@ -366,12 +375,10 @@ export const MenuPlacer = <
 const Menu = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
   props: MenuProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerRef, innerProps } = props;
-
+  const { children, innerRef, innerProps } = props;
   return (
     <div
-      css={getStyles('menu', props)}
-      className={cx({ menu: true }, className)}
+      {...getStyleProps(props, 'menu', { menu: true })}
       ref={innerRef}
       {...innerProps}
     >
@@ -406,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,
@@ -426,18 +440,13 @@ export const MenuList = <
 >(
   props: MenuListProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerProps, innerRef, isMulti } =
-    props;
+  const { children, innerProps, innerRef, isMulti } = props;
   return (
     <div
-      css={getStyles('menuList', props)}
-      className={cx(
-        {
-          'menu-list': true,
-          'menu-list--is-multi': isMulti,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'menuList', {
+        'menu-list': true,
+        'menu-list--is-multi': isMulti,
+      })}
       ref={innerRef}
       {...innerProps}
     >
@@ -454,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;
@@ -485,17 +501,13 @@ export const NoOptionsMessage = <
 >(
   props: NoticeProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, innerProps } = props;
   return (
     <div
-      css={getStyles('noOptionsMessage', props)}
-      className={cx(
-        {
-          'menu-notice': true,
-          'menu-notice--no-options': true,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'noOptionsMessage', {
+        'menu-notice': true,
+        'menu-notice--no-options': true,
+      })}
       {...innerProps}
     >
       {children}
@@ -513,17 +525,13 @@ export const LoadingMessage = <
 >(
   props: NoticeProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, innerProps } = props;
   return (
     <div
-      css={getStyles('loadingMessage', props)}
-      className={cx(
-        {
-          'menu-notice': true,
-          'menu-notice--loading': true,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'loadingMessage', {
+        'menu-notice': true,
+        'menu-notice--loading': true,
+      })}
       {...innerProps}
     >
       {children}
@@ -578,17 +586,18 @@ export const MenuPortal = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->({
-  appendTo,
-  children,
-  className,
-  controlElement,
-  cx,
-  innerProps,
-  menuPlacement,
-  menuPosition,
-  getStyles,
-}: MenuPortalProps<Option, IsMulti, Group>) => {
+>(
+  props: MenuPortalProps<Option, IsMulti, Group>
+) => {
+  const {
+    appendTo,
+    children,
+    controlElement,
+    innerProps,
+    menuPlacement,
+    menuPosition,
+  } = props;
+
   const menuPortalRef = useRef<HTMLDivElement | null>(null);
   const cleanupRef = useRef<(() => void) | void | null>(null);
 
@@ -665,16 +674,17 @@ export const MenuPortal = <
   const menuWrapper = (
     <div
       ref={setMenuPortalElement}
-      css={getStyles('menuPortal', {
-        offset: computedPosition.offset,
-        position: menuPosition,
-        rect: computedPosition.rect,
-      })}
-      className={cx(
+      {...getStyleProps(
         {
-          'menu-portal': true,
+          ...props,
+          offset: computedPosition.offset,
+          position: menuPosition,
+          rect: computedPosition.rect,
         },
-        className
+        'menuPortal',
+        {
+          'menu-portal': true,
+        }
       )}
       {...innerProps}
     >
diff --git a/packages/react-select/src/components/MultiValue.tsx b/packages/react-select/src/components/MultiValue.tsx
index 173d9cd000..7fbf90db53 100644
--- a/packages/react-select/src/components/MultiValue.tsx
+++ b/packages/react-select/src/components/MultiValue.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { ComponentType, ReactNode } from 'react';
-import { jsx, ClassNames } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { CrossIcon } from './indicators';
 import {
   CommonPropsAndClassName,
@@ -8,6 +8,7 @@ import {
   GroupBase,
 } from '../types';
 import { Props } from '../Select';
+import { getStyleProps } from '../utils';
 
 interface MultiValueComponents<
   Option,
@@ -39,54 +40,75 @@ 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,
-  fontSize: '85%',
+>(
+  {
+    theme: { borderRadius, colors },
+    cropWithEllipsis,
+  }: MultiValueProps<Option, IsMulti, Group>,
+  unstyled: boolean
+): CSSObjectWithLabel => ({
   overflow: 'hidden',
-  padding: 3,
-  paddingLeft: 6,
   textOverflow:
     cropWithEllipsis || cropWithEllipsis === undefined ? 'ellipsis' : undefined,
   whiteSpace: 'nowrap',
+  ...(unstyled
+    ? {}
+    : {
+        borderRadius: borderRadius / 2,
+        color: colors.neutral80,
+        fontSize: '85%',
+        padding: 3,
+        paddingLeft: 6,
+      }),
 });
 
 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<
@@ -143,11 +165,8 @@ const MultiValue = <
 ) => {
   const {
     children,
-    className,
     components,
-    cx,
     data,
-    getStyles,
     innerProps,
     isDisabled,
     removeProps,
@@ -157,62 +176,40 @@ const MultiValue = <
   const { Container, Label, Remove } = components;
 
   return (
-    <ClassNames>
-      {({ css, cx: emotionCx }) => (
-        <Container
-          data={data}
-          innerProps={{
-            className: emotionCx(
-              css(getStyles('multiValue', props)),
-              cx(
-                {
-                  'multi-value': true,
-                  'multi-value--is-disabled': isDisabled,
-                },
-                className
-              )
-            ),
-            ...innerProps,
-          }}
-          selectProps={selectProps}
-        >
-          <Label
-            data={data}
-            innerProps={{
-              className: emotionCx(
-                css(getStyles('multiValueLabel', props)),
-                cx(
-                  {
-                    'multi-value__label': true,
-                  },
-                  className
-                )
-              ),
-            }}
-            selectProps={selectProps}
-          >
-            {children}
-          </Label>
-          <Remove
-            data={data}
-            innerProps={{
-              className: emotionCx(
-                css(getStyles('multiValueRemove', props)),
-                cx(
-                  {
-                    'multi-value__remove': true,
-                  },
-                  className
-                )
-              ),
-              'aria-label': `Remove ${children || 'option'}`,
-              ...removeProps,
-            }}
-            selectProps={selectProps}
-          />
-        </Container>
-      )}
-    </ClassNames>
+    <Container
+      data={data}
+      innerProps={{
+        ...getStyleProps(props, 'multiValue', {
+          'multi-value': true,
+          'multi-value--is-disabled': isDisabled,
+        }),
+        ...innerProps,
+      }}
+      selectProps={selectProps}
+    >
+      <Label
+        data={data}
+        innerProps={{
+          ...getStyleProps(props, 'multiValueLabel', {
+            'multi-value__label': true,
+          }),
+        }}
+        selectProps={selectProps}
+      >
+        {children}
+      </Label>
+      <Remove
+        data={data}
+        innerProps={{
+          ...getStyleProps(props, 'multiValueRemove', {
+            'multi-value__remove': true,
+          }),
+          'aria-label': `Remove ${children || 'option'}`,
+          ...removeProps,
+        }}
+        selectProps={selectProps}
+      />
+    </Container>
   );
 };
 
diff --git a/packages/react-select/src/components/Option.tsx b/packages/react-select/src/components/Option.tsx
index 8a3615bb46..57afddcc1c 100644
--- a/packages/react-select/src/components/Option.tsx
+++ b/packages/react-select/src/components/Option.tsx
@@ -7,6 +7,7 @@ import {
   CSSObjectWithLabel,
   GroupBase,
 } from '../types';
+import { getStyleProps } from '../utils';
 
 export interface OptionProps<
   Option = unknown,
@@ -38,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 = <
@@ -80,29 +87,16 @@ const Option = <
 >(
   props: OptionProps<Option, IsMulti, Group>
 ) => {
-  const {
-    children,
-    className,
-    cx,
-    getStyles,
-    isDisabled,
-    isFocused,
-    isSelected,
-    innerRef,
-    innerProps,
-  } = props;
+  const { children, isDisabled, isFocused, isSelected, innerRef, innerProps } =
+    props;
   return (
     <div
-      css={getStyles('option', props)}
-      className={cx(
-        {
-          option: true,
-          'option--is-disabled': isDisabled,
-          'option--is-focused': isFocused,
-          'option--is-selected': isSelected,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'option', {
+        option: true,
+        'option--is-disabled': isDisabled,
+        'option--is-focused': isFocused,
+        'option--is-selected': isSelected,
+      })}
       ref={innerRef}
       aria-disabled={isDisabled}
       {...innerProps}
diff --git a/packages/react-select/src/components/Placeholder.tsx b/packages/react-select/src/components/Placeholder.tsx
index 75f986f682..626d05c589 100644
--- a/packages/react-select/src/components/Placeholder.tsx
+++ b/packages/react-select/src/components/Placeholder.tsx
@@ -6,6 +6,7 @@ import {
   CSSObjectWithLabel,
   GroupBase,
 } from '../types';
+import { getStyleProps } from '../utils';
 
 export interface PlaceholderProps<
   Option = unknown,
@@ -24,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 = <
@@ -41,16 +47,12 @@ const Placeholder = <
 >(
   props: PlaceholderProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, innerProps } = props;
   return (
     <div
-      css={getStyles('placeholder', props)}
-      className={cx(
-        {
-          placeholder: true,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'placeholder', {
+        placeholder: true,
+      })}
       {...innerProps}
     >
       {children}
diff --git a/packages/react-select/src/components/SingleValue.tsx b/packages/react-select/src/components/SingleValue.tsx
index 15fd28345d..042780006e 100644
--- a/packages/react-select/src/components/SingleValue.tsx
+++ b/packages/react-select/src/components/SingleValue.tsx
@@ -6,6 +6,7 @@ import {
   CSSObjectWithLabel,
   GroupBase,
 } from '../types';
+import { getStyleProps } from '../utils';
 
 export interface SingleValueProps<
   Option = unknown,
@@ -26,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 = <
@@ -48,17 +56,13 @@ const SingleValue = <
 >(
   props: SingleValueProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, isDisabled, innerProps } = props;
+  const { children, isDisabled, innerProps } = props;
   return (
     <div
-      css={getStyles('singleValue', props)}
-      className={cx(
-        {
-          'single-value': true,
-          'single-value--is-disabled': isDisabled,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'singleValue', {
+        'single-value': true,
+        'single-value--is-disabled': isDisabled,
+      })}
       {...innerProps}
     >
       {children}
diff --git a/packages/react-select/src/components/containers.tsx b/packages/react-select/src/components/containers.tsx
index e2135c7ce1..b1f0b00246 100644
--- a/packages/react-select/src/components/containers.tsx
+++ b/packages/react-select/src/components/containers.tsx
@@ -6,6 +6,7 @@ import {
   CSSObjectWithLabel,
   GroupBase,
 } from '../types';
+import { getStyleProps } from '../utils';
 
 // ==============================
 // Root Container
@@ -44,18 +45,13 @@ export const SelectContainer = <
 >(
   props: ContainerProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerProps, isDisabled, isRtl } =
-    props;
+  const { children, innerProps, isDisabled, isRtl } = props;
   return (
     <div
-      css={getStyles('container', props)}
-      className={cx(
-        {
-          '--is-disabled': isDisabled,
-          '--is-rtl': isRtl,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'container', {
+        '--is-disabled': isDisabled,
+        '--is-rtl': isRtl,
+      })}
       {...innerProps}
     >
       {children}
@@ -82,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,
@@ -104,20 +107,15 @@ export const ValueContainer = <
 >(
   props: ValueContainerProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, innerProps, isMulti, getStyles, hasValue } =
-    props;
+  const { children, innerProps, isMulti, hasValue } = props;
 
   return (
     <div
-      css={getStyles('valueContainer', props)}
-      className={cx(
-        {
-          'value-container': true,
-          'value-container--is-multi': isMulti,
-          'value-container--has-value': hasValue,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'valueContainer', {
+        'value-container': true,
+        'value-container--is-multi': isMulti,
+        'value-container--has-value': hasValue,
+      })}
       {...innerProps}
     >
       {children}
@@ -154,17 +152,13 @@ export const IndicatorsContainer = <
 >(
   props: IndicatorsContainerProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, innerProps, getStyles } = props;
+  const { children, innerProps } = props;
 
   return (
     <div
-      css={getStyles('indicatorsContainer', props)}
-      className={cx(
-        {
-          indicators: true,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'indicatorsContainer', {
+        indicators: true,
+      })}
       {...innerProps}
     >
       {children}
diff --git a/packages/react-select/src/components/indicators.tsx b/packages/react-select/src/components/indicators.tsx
index 291a5ffa6f..052cc13c90 100644
--- a/packages/react-select/src/components/indicators.tsx
+++ b/packages/react-select/src/components/indicators.tsx
@@ -7,6 +7,7 @@ import {
   CSSObjectWithLabel,
   GroupBase,
 } from '../types';
+import { getStyleProps } from '../utils';
 
 // ==============================
 // Dropdown & Clear Icons
@@ -68,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;
@@ -96,17 +103,13 @@ export const DropdownIndicator = <
 >(
   props: DropdownIndicatorProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, innerProps } = props;
   return (
     <div
-      css={getStyles('dropdownIndicator', props)}
-      className={cx(
-        {
-          indicator: true,
-          'dropdown-indicator': true,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'dropdownIndicator', {
+        indicator: true,
+        'dropdown-indicator': true,
+      })}
       {...innerProps}
     >
       {children || <DownChevron />}
@@ -135,17 +138,13 @@ export const ClearIndicator = <
 >(
   props: ClearIndicatorProps<Option, IsMulti, Group>
 ) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, innerProps } = props;
   return (
     <div
-      css={getStyles('clearIndicator', props)}
-      className={cx(
-        {
-          indicator: true,
-          'clear-indicator': true,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'clearIndicator', {
+        indicator: true,
+        'clear-indicator': true,
+      })}
       {...innerProps}
     >
       {children || <CrossIcon />}
@@ -171,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 = <
@@ -193,12 +199,13 @@ export const IndicatorSeparator = <
 >(
   props: IndicatorSeparatorProps<Option, IsMulti, Group>
 ) => {
-  const { className, cx, getStyles, innerProps } = props;
+  const { innerProps } = props;
   return (
     <span
       {...innerProps}
-      css={getStyles('indicatorSeparator', props)}
-      className={cx({ 'indicator-separator': true }, className)}
+      {...getStyleProps(props, 'indicatorSeparator', {
+        'indicator-separator': true,
+      })}
     />
   );
 };
@@ -216,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,
@@ -235,6 +243,12 @@ export const loadingIndicatorCSS = <
   marginRight: size,
   textAlign: 'center',
   verticalAlign: 'middle',
+  ...(unstyled
+    ? {}
+    : {
+        color: isFocused ? colors.neutral60 : colors.neutral20,
+        padding: baseUnit * 2,
+      }),
 });
 
 interface LoadingDotProps {
@@ -276,18 +290,14 @@ export const LoadingIndicator = <
 >(
   props: LoadingIndicatorProps<Option, IsMulti, Group>
 ) => {
-  const { className, cx, getStyles, innerProps, isRtl } = props;
+  const { innerProps, isRtl } = props;
 
   return (
     <div
-      css={getStyles('loadingIndicator', props)}
-      className={cx(
-        {
-          indicator: true,
-          'loading-indicator': true,
-        },
-        className
-      )}
+      {...getStyleProps(props, 'loadingIndicator', {
+        indicator: true,
+        'loading-indicator': true,
+      })}
       {...innerProps}
     >
       <LoadingDot delay={0} offset={isRtl} />
diff --git a/packages/react-select/src/index.ts b/packages/react-select/src/index.ts
index c0ea65444a..6cee84dfb9 100644
--- a/packages/react-select/src/index.ts
+++ b/packages/react-select/src/index.ts
@@ -41,7 +41,7 @@ export type { OptionProps } from './components/Option';
 export type { PlaceholderProps } from './components/Placeholder';
 export type { SingleValueProps } from './components/SingleValue';
 export type { ThemeConfig } from './theme';
-export type { StylesConfig } from './styles';
+export type { ClassNamesConfig, StylesConfig } from './styles';
 export * from './types';
 export type {
   OptionContext,
diff --git a/packages/react-select/src/styles.ts b/packages/react-select/src/styles.ts
index c734f49ab7..0e0e1b863b 100644
--- a/packages/react-select/src/styles.ts
+++ b/packages/react-select/src/styles.ts
@@ -78,36 +78,12 @@ export interface StylesProps<
   valueContainer: ValueContainerProps<Option, IsMulti, Group>;
 }
 
-type StylesFunction<Props> = (props: Props) => CSSObjectWithLabel;
-export type StylesFunctions<
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>
-> = {
-  [K in keyof StylesProps<Option, IsMulti, Group>]: StylesFunction<
-    StylesProps<Option, IsMulti, Group>[K]
-  >;
-};
-
-export type StylesConfigFunction<Props> = (
-  base: CSSObjectWithLabel,
-  props: Props
-) => CSSObjectWithLabel;
-export type StylesConfig<
-  Option = unknown,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<Option> = GroupBase<Option>
-> = {
-  [K in keyof StylesProps<Option, IsMulti, Group>]?: StylesConfigFunction<
-    StylesProps<Option, IsMulti, Group>[K]
-  >;
-};
-
-export const defaultStyles: StylesFunctions<
-  unknown,
-  boolean,
-  GroupBase<unknown>
-> = {
+export const defaultStyles: {
+  [K in keyof StylesProps<any, any, any>]: (
+    props: StylesProps<unknown, boolean, GroupBase<unknown>>[K],
+    unstyled: boolean
+  ) => CSSObjectWithLabel;
+} = {
   clearIndicator: clearIndicatorCSS,
   container: containerCSS,
   control: controlCSS,
@@ -132,6 +108,27 @@ export const defaultStyles: StylesFunctions<
   valueContainer: valueContainerCSS,
 };
 
+export type StylesConfig<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> = {
+  [K in keyof StylesProps<Option, IsMulti, Group>]?: (
+    base: CSSObjectWithLabel,
+    props: StylesProps<Option, IsMulti, Group>[K]
+  ) => CSSObjectWithLabel;
+};
+
+export type ClassNamesConfig<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> = {
+  [K in keyof StylesProps<Option, IsMulti, Group>]?: (
+    props: StylesProps<Option, IsMulti, Group>[K]
+  ) => string;
+};
+
 // Merge Utility
 // Allows consumers to extend a base Select with additional styles
 
diff --git a/packages/react-select/src/types.ts b/packages/react-select/src/types.ts
index 2926a715ba..516b657aed 100644
--- a/packages/react-select/src/types.ts
+++ b/packages/react-select/src/types.ts
@@ -56,7 +56,10 @@ export interface Theme {
 
 export type ClassNamesState = { [key: string]: boolean };
 
-export type CX = (state: ClassNamesState, className?: string) => string;
+export type CX = (
+  state: ClassNamesState,
+  ...classNames: (string | undefined)[]
+) => string;
 export type GetStyles<
   Option,
   IsMulti extends boolean,
@@ -79,6 +82,10 @@ export interface CommonProps<
     See the `styles` object for the properties available.
   */
   getStyles: GetStyles<Option, IsMulti, Group>;
+  getClassNames: <Key extends keyof StylesProps<Option, IsMulti, Group>>(
+    propertyName: Key,
+    props: StylesProps<Option, IsMulti, Group>[Key]
+  ) => string | undefined;
   getValue: () => Options<Option>;
   hasValue: boolean;
   isMulti: boolean;
diff --git a/packages/react-select/src/utils.ts b/packages/react-select/src/utils.ts
index a65a3eb91b..5fb746ac55 100644
--- a/packages/react-select/src/utils.ts
+++ b/packages/react-select/src/utils.ts
@@ -1,4 +1,5 @@
-import {
+import type { StylesProps } from './styles';
+import type {
   ClassNamesState,
   CommonPropsAndClassName,
   GroupBase,
@@ -43,9 +44,9 @@ function applyPrefixToName(prefix: string, name: string) {
 export function classNames(
   prefix?: string | null,
   state?: ClassNamesState,
-  className?: string
+  ...classNameList: string[]
 ) {
-  const arr = [className];
+  const arr = [...classNameList];
   if (state && prefix) {
     for (let key in state) {
       if (state.hasOwnProperty(key) && state[key]) {
@@ -93,6 +94,7 @@ export const cleanCommonProps = <
     clearValue,
     cx,
     getStyles,
+    getClassNames,
     getValue,
     hasValue,
     isMulti,
@@ -107,6 +109,31 @@ export const cleanCommonProps = <
   return { ...innerProps };
 };
 
+// ==============================
+// Get Style Props
+// ==============================
+
+export const getStyleProps = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+  Key extends keyof StylesProps<Option, IsMulti, Group>
+>(
+  props: Pick<
+    CommonPropsAndClassName<Option, IsMulti, Group>,
+    'cx' | 'getStyles' | 'getClassNames' | 'className'
+  > &
+    StylesProps<Option, IsMulti, Group>[Key],
+  name: Key,
+  classNamesState?: ClassNamesState
+) => {
+  const { cx, getStyles, getClassNames, className } = props;
+  return {
+    css: getStyles(name, props),
+    className: cx(classNamesState ?? {}, getClassNames(name, props), className),
+  };
+};
+
 // ==============================
 // Handle Input Change
 // ==============================
diff --git a/storybook/.storybook/preview.tsx b/storybook/.storybook/preview.tsx
index d9463a953f..3d007bc38c 100644
--- a/storybook/.storybook/preview.tsx
+++ b/storybook/.storybook/preview.tsx
@@ -12,6 +12,11 @@ export const parameters = {
       ],
     },
   },
+  docs: {
+    source: {
+      type: 'code',
+    },
+  },
 };
 
 const globalStyles = css`
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..4c3262a869
--- /dev/null
+++ b/storybook/stories/UnstyledWithTailwind.stories.tsx
@@ -0,0 +1,139 @@
+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(
+              'text-neutral-400',
+              'text-xs',
+              'font-medium',
+              'mb-1',
+              'px-3',
+              'uppercase'
+            ),
+          // 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',
+              'text-sm',
+              'p-[3]',
+              'pl-[6]'
+            ),
+          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,
+};