diff --git a/README.md b/README.md
index fc4d87ac8..3467692e5 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
     <img src="https://img.shields.io/npm/dt/@material-tailwind/react.svg" alt="Total Downloads">
   </a>
   <a href="https://github.com/creativetimofficial/material-tailwind/releases">
-    <img src="https://img.shields.io/badge/version-2.1.9-blue.svg" alt="Version" />
+    <img src="https://img.shields.io/badge/version-2.1.10-blue.svg" alt="Version" />
   </a>
 </p>
 <p align="center">
diff --git a/docs-content/react/releases.ts b/docs-content/react/releases.ts
index 2d7221291..39d352882 100644
--- a/docs-content/react/releases.ts
+++ b/docs-content/react/releases.ts
@@ -1,4 +1,19 @@
 export const releases = [
+  {
+    version: "2.1.10",
+    date: "September 3, 2024",
+    name: "@material-tailwind/react",
+    description: "Material Tailwind v2.1.10",
+    content: [
+      {
+        title: "patch changes",
+        data: [
+          "Update the input design for black and white colors.",
+          "Add black and white colors support for textarea component.",
+        ],
+      },
+    ],
+  },
   {
     version: "2.1.9",
     date: "February 8, 2024",
diff --git a/documentation/react/release-notes.mdx b/documentation/react/release-notes.mdx
index 7cf9513e7..10f143f16 100644
--- a/documentation/react/release-notes.mdx
+++ b/documentation/react/release-notes.mdx
@@ -2,6 +2,7 @@
 title: Release Notes - Material Tailwind
 description: Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
 navigation: [
+              "v2.1.10",
               "v2.1.9",
               "v2.1.8",
               "v2.1.7",
diff --git a/packages/material-tailwind-react/README.md b/packages/material-tailwind-react/README.md
index 5bb9f1701..591ad8611 100644
--- a/packages/material-tailwind-react/README.md
+++ b/packages/material-tailwind-react/README.md
@@ -8,7 +8,7 @@
     <img src="https://img.shields.io/npm/dt/@material-tailwind/react.svg" alt="Total Downloads">
   </a>
   <a href="https://github.com/creativetimofficial/material-tailwind/releases">
-    <img src="https://img.shields.io/badge/version-2.1.9-blue.svg" alt="Version" />
+    <img src="https://img.shields.io/badge/version-2.1.10-blue.svg" alt="Version" />
   </a>
   <a href="https://www.material-tailwind.com/docs/react/license">
     <img src="https://img.shields.io/badge/license-MIT-blue" alt="Licenese">
diff --git a/packages/material-tailwind-react/package.json b/packages/material-tailwind-react/package.json
index c8265d794..f3b548805 100644
--- a/packages/material-tailwind-react/package.json
+++ b/packages/material-tailwind-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material-tailwind/react",
   "homepage": "https://material-tailwind.com",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "description": "@material-tailwind/react is an easy-to-use components library for ReactJS & Tailwind CSS inspired by Material Design.",
   "repository": "https://github.com/creativetimofficial/material-tailwind",
   "license": "MIT",
diff --git a/packages/material-tailwind-react/src/theme/components/input/inputStatic/inputStaticLabelColors.ts b/packages/material-tailwind-react/src/theme/components/input/inputStatic/inputStaticLabelColors.ts
index 30f727cfd..6adc9caff 100644
--- a/packages/material-tailwind-react/src/theme/components/input/inputStatic/inputStaticLabelColors.ts
+++ b/packages/material-tailwind-react/src/theme/components/input/inputStatic/inputStaticLabelColors.ts
@@ -1,10 +1,10 @@
 const inputStaticLabelColors: object = {
   black: {
-    color: "!text-black peer-focus:black",
+    color: "!text-black peer-focus:!text-black",
     after: "after:border-black peer-focus:after:border-black",
   },
   white: {
-    color: "!text-white peer-focus:white",
+    color: "!text-white peer-focus:!text-white",
     after: "after:border-white peer-focus:after:border-white",
   },
   "blue-gray": {
diff --git a/packages/material-tailwind-react/src/theme/components/textarea/textareaOutlined/textareaOutlinedColors.ts b/packages/material-tailwind-react/src/theme/components/textarea/textareaOutlined/textareaOutlinedColors.ts
index bd8a27319..de0dac716 100644
--- a/packages/material-tailwind-react/src/theme/components/textarea/textareaOutlined/textareaOutlinedColors.ts
+++ b/packages/material-tailwind-react/src/theme/components/textarea/textareaOutlined/textareaOutlinedColors.ts
@@ -1,4 +1,14 @@
 const textareaOutlinedColors: object = {
+  black: {
+    color: "!text-black",
+    borderColor: "!border-black",
+    borderColorFocused: "focus:!border-black",
+  },
+  white: {
+    color: "!text-white",
+    borderColor: "!border-white",
+    borderColorFocused: "focus:!border-white",
+  },
   "blue-gray": {
     borderColor: "border-blue-gray-200",
     borderColorFocused: "focus:border-blue-gray-500",
diff --git a/packages/material-tailwind-react/src/theme/components/textarea/textareaOutlined/textareaOutlinedLabelColors.ts b/packages/material-tailwind-react/src/theme/components/textarea/textareaOutlined/textareaOutlinedLabelColors.ts
index f0614e0a0..39aaa95e9 100644
--- a/packages/material-tailwind-react/src/theme/components/textarea/textareaOutlined/textareaOutlinedLabelColors.ts
+++ b/packages/material-tailwind-react/src/theme/components/textarea/textareaOutlined/textareaOutlinedLabelColors.ts
@@ -1,4 +1,14 @@
 const textareaOutlinedLabelColors: object = {
+  black: {
+    color: "!text-black peer-focus:!text-black",
+    before: "before:!border-black peer-focus:before:!border-black",
+    after: "after:!border-black peer-focus:after:!border-black",
+  },
+  white: {
+    color: "!text-white peer-focus:!text-white",
+    before: "before:!border-white peer-focus:before:!border-white",
+    after: "after:!border-white peer-focus:after:!border-white",
+  },
   "blue-gray": {
     color: "text-blue-gray-400 peer-focus:text-blue-gray-500",
     before: "before:border-blue-gray-200 peer-focus:before:!border-blue-gray-500",
diff --git a/packages/material-tailwind-react/src/theme/components/textarea/textareaStandard/textareaStandardColors.ts b/packages/material-tailwind-react/src/theme/components/textarea/textareaStandard/textareaStandardColors.ts
index 1ee581937..e6348cd75 100644
--- a/packages/material-tailwind-react/src/theme/components/textarea/textareaStandard/textareaStandardColors.ts
+++ b/packages/material-tailwind-react/src/theme/components/textarea/textareaStandard/textareaStandardColors.ts
@@ -1,4 +1,14 @@
 const textareaStandardColors: object = {
+  black: {
+    color: "!text-black",
+    borderColor: "!border-black",
+    borderColorFocused: "focus:!border-black",
+  },
+  white: {
+    color: "!text-white",
+    borderColor: "!border-white",
+    borderColorFocused: "focus:!border-white",
+  },
   "blue-gray": {
     borderColor: "border-blue-gray-200",
     borderColorFocused: "focus:border-blue-gray-500",
diff --git a/packages/material-tailwind-react/src/theme/components/textarea/textareaStandard/textareaStandardLabelColors.ts b/packages/material-tailwind-react/src/theme/components/textarea/textareaStandard/textareaStandardLabelColors.ts
index 441e2e4bb..fc05aa547 100644
--- a/packages/material-tailwind-react/src/theme/components/textarea/textareaStandard/textareaStandardLabelColors.ts
+++ b/packages/material-tailwind-react/src/theme/components/textarea/textareaStandard/textareaStandardLabelColors.ts
@@ -1,4 +1,12 @@
 const textareaStandardLabelColors: object = {
+  black: {
+    color: "!text-black peer-focus:!text-black",
+    after: "after:!border-black peer-focus:after:!border-black",
+  },
+  white: {
+    color: "!text-white peer-focus:!text-white",
+    after: "after:!border-white peer-focus:after:!border-white",
+  },
   "blue-gray": {
     color: "text-blue-gray-500 peer-focus:text-blue-gray-500",
     after: "after:border-blue-gray-500 peer-focus:after:!border-blue-gray-500",
diff --git a/packages/material-tailwind-react/src/theme/components/textarea/textareaStatic/textareaStaticColors.ts b/packages/material-tailwind-react/src/theme/components/textarea/textareaStatic/textareaStaticColors.ts
index 91730191d..9af9f151a 100644
--- a/packages/material-tailwind-react/src/theme/components/textarea/textareaStatic/textareaStaticColors.ts
+++ b/packages/material-tailwind-react/src/theme/components/textarea/textareaStatic/textareaStaticColors.ts
@@ -1,4 +1,14 @@
 const textareaStaticColors: object = {
+  black: {
+    color: "!text-black",
+    borderColor: "!border-black",
+    borderColorFocused: "focus:!border-black",
+  },
+  white: {
+    color: "!text-white",
+    borderColor: "!border-white",
+    borderColorFocused: "focus:!border-white",
+  },
   "blue-gray": {
     borderColor: "border-blue-gray-200",
     borderColorFocused: "focus:border-blue-gray-500",
diff --git a/packages/material-tailwind-react/src/theme/components/textarea/textareaStatic/textareaStaticLabelColors.ts b/packages/material-tailwind-react/src/theme/components/textarea/textareaStatic/textareaStaticLabelColors.ts
index 8f6ce4d4f..34cee022e 100644
--- a/packages/material-tailwind-react/src/theme/components/textarea/textareaStatic/textareaStaticLabelColors.ts
+++ b/packages/material-tailwind-react/src/theme/components/textarea/textareaStatic/textareaStaticLabelColors.ts
@@ -1,4 +1,12 @@
 const textareaStaticLabelColors: object = {
+  black: {
+    color: "!text-black peer-focus:!text-black",
+    after: "after:!border-black peer-focus:after:!border-black",
+  },
+  white: {
+    color: "!text-white peer-focus:!text-white",
+    after: "after:!border-white peer-focus:after:!border-white",
+  },
   "blue-gray": {
     color: "text-blue-gray-500 peer-focus:text-blue-gray-500",
     after: "after:border-blue-gray-500 peer-focus:after:border-blue-gray-500",