Tailwind CSS Switch - Theme

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

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

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

Switch Theme Object Type

interface SwitchButtonStylesType {
  defaultProps: {
    color: string;
    label: string;
    ripple: boolean;
    className: string;
    containerProps: object;
    labelProps: object;
    circleProps: object;
  valid: {
    colors: string[];
  styles: {
    base: {
      root: object;
      container: object;
      input: object;
      circle: object;
      ripple: object;
      label: object;
    colors: object;

For TypeScript Only

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

Switch Theme Customization

const theme = {
  switch: {
    styles: {
      base: {
        root: {
          display: "inline-flex",
          alignItems: "items-center",
Edit this page on Github