Tailwind CSS Textarea - Theme

Learn how to customize the theme and styles for textarea component, the theme object for textarea component has three main objects:

A. The defaultProps object for setting up the default value for props of textarea component.
B. The valid object for customizing the valid values for textarea component props.
C. The styles object for customizing the theme and styles of textarea component.

You can customize the theme and styles of textarea component by adding Tailwind CSS classes as key paired values for objects.



Textarea Theme Object Type

Variant of Textarea component theme has a specific type of Textarea Variant Styles Type

interface TextareaStylesType {
  defaultProps: {
    variant: string;
    size: string;
    color: string;
    label: string;
    error: boolean;
    success: boolean;
    resize: boolean;
    labelProps: object;
    className: string;
  };
  valid: {
    variants: string[];
    sizes: string[];
    colors: string[];
  };
  styles: {
    base: {
      container: object;
      textarea: object;
      label: object;
    };
    variants: {
      outlined: TextareaVariantStylesType;
      standard: TextareaVariantStylesType;
      static: TextareaVariantStylesType;
    };
  };
}


For TypeScript Only

import type { TextareaStylesType } from "@material-tailwind/react";

Theme Object Type - Textarea Variant

Textarea variant object type contains two specific types of Textarea Size Styles Type and Textarea State Styles Type

interface TextareaVariantStylesType {
  base?: {
    container: object;
    textarea: object;
    label: object;
  };
  sizes: {
    md: TextareaSizeStylesType;
    lg: TextareaSizeStylesType;
  };
  colors: {
    textarea: object;
    label: object;
  };
  error: TextareaStateStylesType;
  success: TextareaStateStylesType;
}


For TypeScript Only

import type { TextareaVariantStylesType } from "@material-tailwind/react";

Theme Object Type - Textarea Size

interface TextareaSizeStylesType {
  container: object;
  textarea: object;
  label: object;
}


For TypeScript Only

import type { TextareaSizeStylesType } from "@material-tailwind/react";

Theme Object Type - Textarea State

interface TextareaStateStylesType {
  textarea: object;
  label: object;
}


For TypeScript Only

import type { TextareaStateStylesType } from "@material-tailwind/react";

Textarea Theme Customization

const theme = {
  textarea: {
    styles: {
      base: {
        container: {
          position: "relative",
          width: "w-full",
          minWidth: "min-w-[200px]",
        },
      },
    },
  },
};

Related

Examples

Checkout different examples for textarea component.

Props

Learn more about props definition and types of textarea component.

Edit this page on Github