diff --git a/categories/web/action/react/package.json b/categories/web/action/react/package.json
index 5043c7d..022b425 100644
--- a/categories/web/action/react/package.json
+++ b/categories/web/action/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-action-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"
diff --git a/categories/web/blob/react/package.json b/categories/web/blob/react/package.json
index d095d59..7b37709 100644
--- a/categories/web/blob/react/package.json
+++ b/categories/web/blob/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-blob-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"
diff --git a/categories/web/choice/react/package.json b/categories/web/choice/react/package.json
index 1b03f35..6f00508 100644
--- a/categories/web/choice/react/package.json
+++ b/categories/web/choice/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-choice-react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "files": [
     "dist",
     "src"
diff --git a/categories/web/choice/react/src/components/DropdownSelect/DropdownSelect.test.tsx b/categories/web/choice/react/src/components/DropdownSelect/DropdownSelect.test.tsx
index f20f417..78340c5 100644
--- a/categories/web/choice/react/src/components/DropdownSelect/DropdownSelect.test.tsx
+++ b/categories/web/choice/react/src/components/DropdownSelect/DropdownSelect.test.tsx
@@ -14,13 +14,26 @@ import {
   it,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   DropdownSelect,
   DropdownSelectDerivedElement,
+  dropdownSelectPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('dropdownSelectPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    dropdownSelectPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('DropdownSelect', () => {
   afterEach(() => {
     cleanup();
diff --git a/categories/web/choice/react/src/components/DropdownSelect/index.tsx b/categories/web/choice/react/src/components/DropdownSelect/index.tsx
index f91e01b..abc00fd 100644
--- a/categories/web/choice/react/src/components/DropdownSelect/index.tsx
+++ b/categories/web/choice/react/src/components/DropdownSelect/index.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
-import plugin from 'tailwindcss/plugin';
 import clsx from 'clsx';
 import { useFallbackId } from '@modal-sh/react-utils';
+import { PluginCreator } from 'tailwindcss/types/config';
 
 /**
  * Derived HTML element of the {@link DropdownSelect} component.
@@ -43,7 +43,7 @@ export interface DropdownSelectProps extends Omit<React.HTMLProps<DropdownSelect
   hiddenLabel?: boolean,
 }
 
-export const dropdownSelectPlugin = plugin(({ addComponents }) => {
+export const dropdownSelectPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.dropdown-select': {
       '& optgroup': {
@@ -63,7 +63,7 @@ export const dropdownSelectPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for selecting a single value from a dropdown.
diff --git a/categories/web/choice/react/src/components/MenuSelect/MenuSelect.test.tsx b/categories/web/choice/react/src/components/MenuSelect/MenuSelect.test.tsx
index 03625ed..70a71ba 100644
--- a/categories/web/choice/react/src/components/MenuSelect/MenuSelect.test.tsx
+++ b/categories/web/choice/react/src/components/MenuSelect/MenuSelect.test.tsx
@@ -14,13 +14,26 @@ import {
   it,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   MenuSelect,
   MenuSelectDerivedElement,
+  menuSelectPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('menuSelectPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    menuSelectPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('MenuSelect', () => {
   afterEach(() => {
     cleanup();
diff --git a/categories/web/choice/react/src/components/MenuSelect/index.tsx b/categories/web/choice/react/src/components/MenuSelect/index.tsx
index 2eec1f2..ebab679 100644
--- a/categories/web/choice/react/src/components/MenuSelect/index.tsx
+++ b/categories/web/choice/react/src/components/MenuSelect/index.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
 import { useFallbackId } from '@modal-sh/react-utils';
+import { PluginCreator } from 'tailwindcss/types/config';
 
 /**
  * Derived HTML element of the {@link MenuSelect} component.
@@ -51,7 +51,7 @@ export interface MenuSelectProps extends Omit<React.HTMLProps<MenuSelectDerivedE
   startingHeight?: number | string,
 }
 
-export const menuSelectPlugin = plugin(({ addComponents }) => {
+export const menuSelectPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.menu-select': {
       '& optgroup': {
@@ -71,7 +71,7 @@ export const menuSelectPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for selecting a single value from a menu.
diff --git a/categories/web/choice/react/src/components/RadioButton/RadioButton.test.tsx b/categories/web/choice/react/src/components/RadioButton/RadioButton.test.tsx
index 74ed2a0..5ea87d0 100644
--- a/categories/web/choice/react/src/components/RadioButton/RadioButton.test.tsx
+++ b/categories/web/choice/react/src/components/RadioButton/RadioButton.test.tsx
@@ -14,13 +14,26 @@ import {
   afterEach,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   RadioButton,
   RadioButtonDerivedElement,
+  radioButtonPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('radioButtonPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    radioButtonPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('RadioButton', () => {
   afterEach(() => {
     cleanup();
diff --git a/categories/web/choice/react/src/components/RadioButton/index.tsx b/categories/web/choice/react/src/components/RadioButton/index.tsx
index 5be1b06..ba358a4 100644
--- a/categories/web/choice/react/src/components/RadioButton/index.tsx
+++ b/categories/web/choice/react/src/components/RadioButton/index.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { Button } from '@tesseract-design/web-base';
-import plugin from 'tailwindcss/plugin';
 import { useFallbackId } from '@modal-sh/react-utils';
+import { PluginCreator } from 'tailwindcss/types/config';
 
 /**
  * Derived HTML element of the {@link RadioButton} component.
@@ -39,7 +39,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<RadioBu
   variant?: Button.Variant;
 }
 
-export const radioButtonPlugin = plugin(({ addComponents }) => {
+export const radioButtonPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.radio-button': {
       '& + label > :first-child > :first-child': {
@@ -50,7 +50,7 @@ export const radioButtonPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for selecting a single value from an array of choices grouped by name.
diff --git a/categories/web/choice/react/src/components/RadioTickBox/RadioTickBox.test.tsx b/categories/web/choice/react/src/components/RadioTickBox/RadioTickBox.test.tsx
index 3cd3b1d..a5f31d7 100644
--- a/categories/web/choice/react/src/components/RadioTickBox/RadioTickBox.test.tsx
+++ b/categories/web/choice/react/src/components/RadioTickBox/RadioTickBox.test.tsx
@@ -13,13 +13,26 @@ import {
   afterEach,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   RadioTickBox,
   RadioTickBoxDerivedElement,
+  radioTickBoxPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('radioTickBoxPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    radioTickBoxPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('RadioTickBox', () => {
   afterEach(() => {
     cleanup();
diff --git a/categories/web/choice/react/src/components/RadioTickBox/index.tsx b/categories/web/choice/react/src/components/RadioTickBox/index.tsx
index 29d7c69..fcf53a2 100644
--- a/categories/web/choice/react/src/components/RadioTickBox/index.tsx
+++ b/categories/web/choice/react/src/components/RadioTickBox/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
 import { useFallbackId } from '@modal-sh/react-utils';
+import { PluginCreator } from 'tailwindcss/types/config';
 
 /**
  * Derived HTML element of the {@link RadioTickBox} component.
@@ -22,7 +22,7 @@ export interface RadioTickBoxProps extends Omit<React.InputHTMLAttributes<RadioT
   subtext?: React.ReactNode;
 }
 
-export const radioTickBoxPlugin = plugin(({ addComponents }) => {
+export const radioTickBoxPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.radio-tick-box': {
       '& + label + label > :first-child > :first-child': {
@@ -33,7 +33,7 @@ export const radioTickBoxPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for selecting a single value from an array of choices grouped by name.
diff --git a/categories/web/color/react/package.json b/categories/web/color/react/package.json
index c0595ae..f5dce1a 100644
--- a/categories/web/color/react/package.json
+++ b/categories/web/color/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-color-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"
diff --git a/categories/web/color/react/src/components/ColorPicker/index.tsx b/categories/web/color/react/src/components/ColorPicker/index.tsx
index 69801f3..1af4d5e 100644
--- a/categories/web/color/react/src/components/ColorPicker/index.tsx
+++ b/categories/web/color/react/src/components/ColorPicker/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 
 /**
  * Derived HTML element of the {@link ColorPicker} component.
@@ -15,7 +15,7 @@ export interface ColorPickerProps extends Omit<React.HTMLProps<ColorPickerDerive
   size?: 'small' | 'medium' | 'large';
 }
 
-export const colorPickerPlugin = plugin(({ addComponents }) => {
+export const colorPickerPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.color-picker': {
       '&::-webkit-color-swatch-wrapper': {
@@ -29,7 +29,7 @@ export const colorPickerPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for picking a color.
diff --git a/categories/web/formatted/react/package.json b/categories/web/formatted/react/package.json
index 08c2706..96103af 100644
--- a/categories/web/formatted/react/package.json
+++ b/categories/web/formatted/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-formatted-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"
diff --git a/categories/web/freeform/react/package.json b/categories/web/freeform/react/package.json
index 55ceca4..5656965 100644
--- a/categories/web/freeform/react/package.json
+++ b/categories/web/freeform/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-freeform-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"
diff --git a/categories/web/information/react/package.json b/categories/web/information/react/package.json
index 4f59b5c..21b9320 100644
--- a/categories/web/information/react/package.json
+++ b/categories/web/information/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-information-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"
diff --git a/categories/web/multichoice/react/package.json b/categories/web/multichoice/react/package.json
index d6fd682..37c0252 100644
--- a/categories/web/multichoice/react/package.json
+++ b/categories/web/multichoice/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-multichoice-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"
diff --git a/categories/web/multichoice/react/src/components/MenuMultiSelect/MenuMultiSelect.test.tsx b/categories/web/multichoice/react/src/components/MenuMultiSelect/MenuMultiSelect.test.tsx
index 8a6cd18..cf5cc14 100644
--- a/categories/web/multichoice/react/src/components/MenuMultiSelect/MenuMultiSelect.test.tsx
+++ b/categories/web/multichoice/react/src/components/MenuMultiSelect/MenuMultiSelect.test.tsx
@@ -14,13 +14,26 @@ import {
   it,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   MenuMultiSelect,
   MenuMultiSelectDerivedElement,
+  menuMultiSelectPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('menuMultiSelectPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    menuMultiSelectPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('MenuMultiSelect', () => {
   afterEach(() => {
     cleanup();
diff --git a/categories/web/multichoice/react/src/components/MenuMultiSelect/index.tsx b/categories/web/multichoice/react/src/components/MenuMultiSelect/index.tsx
index d827e26..58700df 100644
--- a/categories/web/multichoice/react/src/components/MenuMultiSelect/index.tsx
+++ b/categories/web/multichoice/react/src/components/MenuMultiSelect/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
@@ -51,7 +51,7 @@ export interface MenuMultiSelectProps extends Omit<React.HTMLProps<MenuMultiSele
   startingHeight?: number | string,
 }
 
-export const menuMultiSelectPlugin = plugin(({ addComponents, }) => {
+export const menuMultiSelectPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.menu-multi-select': {
       '& optgroup': {
@@ -71,7 +71,7 @@ export const menuMultiSelectPlugin = plugin(({ addComponents, }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for inputting textual values.
diff --git a/categories/web/multichoice/react/src/components/TagInput/index.tsx b/categories/web/multichoice/react/src/components/TagInput/index.tsx
index 90aa738..0f00aa5 100644
--- a/categories/web/multichoice/react/src/components/TagInput/index.tsx
+++ b/categories/web/multichoice/react/src/components/TagInput/index.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { TagsInput } from './internal';
 import clsx from 'clsx';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useClientSide, useFallbackId, useProxyInput } from '@modal-sh/react-utils';
 import { TextControl } from '@tesseract-design/web-base';
-import plugin from 'tailwindcss/plugin';
 
 export const AVAILABLE_TAG_INPUT_SEPARATORS = ['comma', 'newline', 'semicolon'] as const;
 
@@ -92,7 +92,7 @@ export interface TagInputProps extends Omit<React.HTMLProps<TagInputDerivedEleme
   valueSeparator?: TagInputSeparator,
 }
 
-export const tagInputPlugin = plugin(({ addComponents }) => {
+export const tagInputPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.tag-input': {
       '&[data-size] label + * + div': {
@@ -207,7 +207,7 @@ export const tagInputPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for inputting textual values.
diff --git a/categories/web/multichoice/react/src/components/ToggleButton/ToggleButton.test.tsx b/categories/web/multichoice/react/src/components/ToggleButton/ToggleButton.test.tsx
index 50ebe1a..dfcdecc 100644
--- a/categories/web/multichoice/react/src/components/ToggleButton/ToggleButton.test.tsx
+++ b/categories/web/multichoice/react/src/components/ToggleButton/ToggleButton.test.tsx
@@ -14,13 +14,26 @@ import {
   afterEach,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   ToggleButton,
   ToggleButtonDerivedElement,
+  toggleButtonPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('toggleButtonPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    toggleButtonPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('ToggleButton', () => {
   afterEach(() => {
     cleanup();
diff --git a/categories/web/multichoice/react/src/components/ToggleButton/index.tsx b/categories/web/multichoice/react/src/components/ToggleButton/index.tsx
index 0f0a34c..e765ce8 100644
--- a/categories/web/multichoice/react/src/components/ToggleButton/index.tsx
+++ b/categories/web/multichoice/react/src/components/ToggleButton/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { Button } from '@tesseract-design/web-base';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
@@ -43,7 +43,7 @@ export interface ToggleButtonProps extends Omit<React.InputHTMLAttributes<Toggle
   indeterminate?: boolean;
 }
 
-export const toggleButtonPlugin = plugin(({ addComponents, }) => {
+export const toggleButtonPlugin: PluginCreator = ({ addComponents, }) => {
   addComponents({
     '.toggle-button': {
       '& + label > :first-child > :first-child': {
@@ -60,7 +60,7 @@ export const toggleButtonPlugin = plugin(({ addComponents, }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for toggling a Boolean value.
diff --git a/categories/web/multichoice/react/src/components/ToggleSwitch/ToggleSwitch.test.tsx b/categories/web/multichoice/react/src/components/ToggleSwitch/ToggleSwitch.test.tsx
index 0b2f707..6da0120 100644
--- a/categories/web/multichoice/react/src/components/ToggleSwitch/ToggleSwitch.test.tsx
+++ b/categories/web/multichoice/react/src/components/ToggleSwitch/ToggleSwitch.test.tsx
@@ -13,13 +13,26 @@ import {
   afterEach,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   ToggleSwitch,
   ToggleSwitchDerivedElement,
+  toggleSwitchPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('toggleSwitchPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    toggleSwitchPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('ToggleSwitch', () => {
   afterEach(() => {
     cleanup();
diff --git a/categories/web/multichoice/react/src/components/ToggleSwitch/index.tsx b/categories/web/multichoice/react/src/components/ToggleSwitch/index.tsx
index 960c152..5b7e12c 100644
--- a/categories/web/multichoice/react/src/components/ToggleSwitch/index.tsx
+++ b/categories/web/multichoice/react/src/components/ToggleSwitch/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
@@ -34,7 +34,7 @@ export interface ToggleSwitchProps extends Omit<React.InputHTMLAttributes<Toggle
   uncheckedLabel?: React.ReactNode;
 }
 
-export const toggleSwitchPlugin = plugin(({ addComponents }) => {
+export const toggleSwitchPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.toggle-switch': {
       '& + label + label + label > :first-child': {
@@ -153,7 +153,7 @@ export const toggleSwitchPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for toggling a Boolean value in an appearance of a toggle switch.
diff --git a/categories/web/multichoice/react/src/components/ToggleTickBox/ToggleTickBox.test.tsx b/categories/web/multichoice/react/src/components/ToggleTickBox/ToggleTickBox.test.tsx
index 2db4a8a..1f41a7f 100644
--- a/categories/web/multichoice/react/src/components/ToggleTickBox/ToggleTickBox.test.tsx
+++ b/categories/web/multichoice/react/src/components/ToggleTickBox/ToggleTickBox.test.tsx
@@ -13,13 +13,26 @@ import {
   afterEach,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   ToggleTickBox,
   ToggleTickBoxDerivedElement,
+  toggleTickBoxPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('toggleTickBoxPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    toggleTickBoxPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('ToggleTickBox', () => {
   afterEach(() => {
     cleanup();
diff --git a/categories/web/multichoice/react/src/components/ToggleTickBox/index.tsx b/categories/web/multichoice/react/src/components/ToggleTickBox/index.tsx
index b353d73..9cfcdcd 100644
--- a/categories/web/multichoice/react/src/components/ToggleTickBox/index.tsx
+++ b/categories/web/multichoice/react/src/components/ToggleTickBox/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
@@ -26,7 +26,7 @@ export interface ToggleTickBoxProps extends Omit<React.InputHTMLAttributes<Toggl
   indeterminate?: boolean;
 }
 
-export const toggleTickBoxPlugin = plugin(({ addComponents, }) => {
+export const toggleTickBoxPlugin: PluginCreator = ({ addComponents, }) => {
   addComponents({
     '.toggle-tick-box': {
       '& + label + label > :first-child > :first-child': {
@@ -43,7 +43,7 @@ export const toggleTickBoxPlugin = plugin(({ addComponents, }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for toggling a Boolean value with the appearance of a tick box.
diff --git a/categories/web/navigation/react/package.json b/categories/web/navigation/react/package.json
index e281dd2..84948da 100644
--- a/categories/web/navigation/react/package.json
+++ b/categories/web/navigation/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-navigation-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"
diff --git a/categories/web/number/react/package.json b/categories/web/number/react/package.json
index 48addf8..2827286 100644
--- a/categories/web/number/react/package.json
+++ b/categories/web/number/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-number-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"
diff --git a/categories/web/number/react/src/components/NumberSpinner/NumberSpinner.test.tsx b/categories/web/number/react/src/components/NumberSpinner/NumberSpinner.test.tsx
index b09cd1f..e79af43 100644
--- a/categories/web/number/react/src/components/NumberSpinner/NumberSpinner.test.tsx
+++ b/categories/web/number/react/src/components/NumberSpinner/NumberSpinner.test.tsx
@@ -14,13 +14,26 @@ import {
   afterEach,
 } from 'vitest';
 import matchers from '@testing-library/jest-dom/matchers';
+import { PluginAPI } from 'tailwindcss/types/config';
 import {
   NumberSpinner,
   NumberSpinnerDerivedElement,
+  numberSpinnerPlugin,
 } from '.';
 
 expect.extend(matchers);
 
+describe('numberSpinnerPlugin', () => {
+  it('adds component styles', () => {
+    const pluginApi = {
+      addComponents: vi.fn(),
+    } as unknown as PluginAPI;
+
+    numberSpinnerPlugin(pluginApi);
+    expect(pluginApi.addComponents).toBeCalledTimes(1);
+  });
+});
+
 describe('NumberSpinner', () => {
   afterEach(() => {
     cleanup();
diff --git a/categories/web/number/react/src/components/NumberSpinner/index.tsx b/categories/web/number/react/src/components/NumberSpinner/index.tsx
index d8e1101..22349ab 100644
--- a/categories/web/number/react/src/components/NumberSpinner/index.tsx
+++ b/categories/web/number/react/src/components/NumberSpinner/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useBrowser, useClientSide, useFallbackId } from '@modal-sh/react-utils';
 
 /**
@@ -59,7 +59,7 @@ export interface NumberSpinnerProps extends Omit<React.HTMLProps<NumberSpinnerDe
   initialStepDelay?: number,
 }
 
-export const numberSpinnerPlugin = plugin(({ addComponents, }) => {
+export const numberSpinnerPlugin: PluginCreator = ({ addComponents, }) => {
   addComponents({
     '.number-spinner': {
       '&[data-browser="chrome"] > input::-webkit-inner-spin-button': {
@@ -80,7 +80,7 @@ export const numberSpinnerPlugin = plugin(({ addComponents, }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for inputting discrete numeric values.
diff --git a/categories/web/number/react/src/components/Slider/index.tsx b/categories/web/number/react/src/components/Slider/index.tsx
index 93806eb..20ab6d2 100644
--- a/categories/web/number/react/src/components/Slider/index.tsx
+++ b/categories/web/number/react/src/components/Slider/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useBrowser } from '@modal-sh/react-utils';
 
 const filterOptions = (children: React.ReactNode): React.ReactNode => {
@@ -66,7 +66,7 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLInputElement>, 'ty
   length?: React.CSSProperties['width'];
 }
 
-export const sliderPlugin = plugin(({ addComponents }) => {
+export const sliderPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.slider': {
       '& > input': {
@@ -226,7 +226,7 @@ export const sliderPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for inputting continuous numeric values.
diff --git a/categories/web/temporal/react/package.json b/categories/web/temporal/react/package.json
index 75df01f..dc842cc 100644
--- a/categories/web/temporal/react/package.json
+++ b/categories/web/temporal/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/web-temporal-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "files": [
     "dist",
     "src"
diff --git a/categories/web/temporal/react/src/components/DateDropdown/index.tsx b/categories/web/temporal/react/src/components/DateDropdown/index.tsx
index 68522c4..106dcd5 100644
--- a/categories/web/temporal/react/src/components/DateDropdown/index.tsx
+++ b/categories/web/temporal/react/src/components/DateDropdown/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
@@ -47,7 +47,7 @@ export interface DateDropdownProps extends Omit<React.HTMLProps<DateDropdownDeri
   length?: number,
 }
 
-export const dateDropdownPlugin = plugin(({ addComponents }) => {
+export const dateDropdownPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.date-dropdown': {
       '& > input::-webkit-calendar-picker-indicator': {
@@ -71,7 +71,7 @@ export const dateDropdownPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for inputting date values.
diff --git a/categories/web/temporal/react/src/components/TimeSpinner/index.tsx b/categories/web/temporal/react/src/components/TimeSpinner/index.tsx
index 221e688..cb47b7c 100644
--- a/categories/web/temporal/react/src/components/TimeSpinner/index.tsx
+++ b/categories/web/temporal/react/src/components/TimeSpinner/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
-import plugin from 'tailwindcss/plugin';
+import { PluginCreator } from 'tailwindcss/types/config';
 import { useFallbackId } from '@modal-sh/react-utils';
 
 /**
@@ -65,7 +65,7 @@ export interface TimeSpinnerProps extends Omit<React.HTMLProps<TimeSpinnerDerive
   step?: Step | string,
 }
 
-export const timeSpinnerPlugin = plugin(({ addComponents }) => {
+export const timeSpinnerPlugin: PluginCreator = ({ addComponents }) => {
   addComponents({
     '.time-spinner': {
       '& > input::-webkit-calendar-picker-indicator': {
@@ -89,7 +89,7 @@ export const timeSpinnerPlugin = plugin(({ addComponents }) => {
       },
     },
   });
-});
+};
 
 /**
  * Component for inputting time values.
diff --git a/storybook/react/tailwind.config.ts b/storybook/react/tailwind.config.ts
index 1cdec46..9482414 100644
--- a/storybook/react/tailwind.config.ts
+++ b/storybook/react/tailwind.config.ts
@@ -1,5 +1,6 @@
 import {Config} from 'tailwindcss';
 import defaultTheme from 'tailwindcss/defaultTheme';
+import plugin from 'tailwindcss/plugin';
 import {
 	radioButtonPlugin,
 	menuSelectPlugin,
@@ -31,6 +32,7 @@ const config: Config = {
 		'./.storybook/**/*.html',
 	],
 	theme: {
+		// TODO put into a tesseract plugin
 		fontFamily: {
 			sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
 			headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
@@ -98,20 +100,20 @@ const config: Config = {
 		},
 	},
 	plugins: [
-		radioButtonPlugin,
-		menuSelectPlugin,
-		radioTickBoxPlugin,
-		dropdownSelectPlugin,
-		colorPickerPlugin,
-		menuMultiSelectPlugin,
-		tagInputPlugin,
-		toggleButtonPlugin,
-		toggleSwitchPlugin,
-		toggleTickBoxPlugin,
-		numberSpinnerPlugin,
-		sliderPlugin,
-		dateDropdownPlugin,
-		timeSpinnerPlugin,
+		plugin(radioButtonPlugin),
+		plugin(menuSelectPlugin),
+		plugin(radioTickBoxPlugin),
+		plugin(dropdownSelectPlugin),
+		plugin(colorPickerPlugin),
+		plugin(menuMultiSelectPlugin),
+		plugin(tagInputPlugin),
+		plugin(toggleButtonPlugin),
+		plugin(toggleSwitchPlugin),
+		plugin(toggleTickBoxPlugin),
+		plugin(numberSpinnerPlugin),
+		plugin(sliderPlugin),
+		plugin(dateDropdownPlugin),
+		plugin(timeSpinnerPlugin),
 	],
 };