diff --git a/packages/components/src/TestComponent/TestComponent.module.css b/packages/components/src/TestComponent/TestComponent.module.css
index 4a7efed61..b1d5717ba 100644
--- a/packages/components/src/TestComponent/TestComponent.module.css
+++ b/packages/components/src/TestComponent/TestComponent.module.css
@@ -1,13 +1,7 @@
-.testComponent--container {
-  @apply text-body leading-body;
-  @apply text-brand-700;
+.container {
   @apply w-full;
 }
 
-.testComponent--align-left {
-  @apply text-left;
-}
-
-.testComponent--align-right {
+.alignRight {
   @apply text-right;
 }
diff --git a/packages/components/src/TestComponent/TestComponent.tsx b/packages/components/src/TestComponent/TestComponent.tsx
index 882077f0c..8971ff70d 100644
--- a/packages/components/src/TestComponent/TestComponent.tsx
+++ b/packages/components/src/TestComponent/TestComponent.tsx
@@ -1,10 +1,8 @@
 import React, { ReactNode } from "react";
 
-import classNames from "classnames/bind";
+import clsx from "clsx";
 import styles from "./TestComponent.module.css";
 
-const cx = classNames.bind(styles);
-
 type Props = {
   /**
    * Child node(s) that can be nested inside component.
@@ -17,16 +15,13 @@ type Props = {
 };
 
 /**
- * This component is a replica of the template created by plop found in plop-templates.
- * TODO: Find a way to keep these 2 files in sync.
+ * A super cool component that does a really awesome thing.
+ * TODO: Update to describe your component!
  */
 function TestComponent({ children, align }: Props) {
   return (
     <div
-      className={cx(
-        "testComponent--container",
-        `testComponent--align-${align}`
-      )}
+      className={clsx(styles.container, align === "right" && styles.alignRight)}
     >
       {children}
     </div>
diff --git a/packages/components/src/TestComponent/__snapshots__/TestComponent.spec.tsx.snap b/packages/components/src/TestComponent/__snapshots__/TestComponent.spec.tsx.snap
deleted file mode 100644
index fc2c940bc..000000000
--- a/packages/components/src/TestComponent/__snapshots__/TestComponent.spec.tsx.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<TestComponent /> Default story renders snapshot 1`] = `
-<div
-  class="testComponent--container testComponent--align-left"
->
-  Hello world
-</div>
-`;
-
-exports[`<TestComponent /> RightAligned story renders snapshot 1`] = `
-<div
-  class="testComponent--container testComponent--align-right"
->
-  Hello world
-</div>
-`;
diff --git a/plop-templates/Component/Component.module.css.hbs b/plop-templates/Component/Component.module.css.hbs
index bfa97ba54..b1d5717ba 100644
--- a/plop-templates/Component/Component.module.css.hbs
+++ b/plop-templates/Component/Component.module.css.hbs
@@ -1,13 +1,7 @@
-.{{camelCase name}}--container {
-  @apply text-body leading-body;
-  @apply text-brand-700;
+.container {
   @apply w-full;
 }
 
-.{{camelCase name}}--align-left {
-  @apply text-left;
-}
-
-.{{camelCase name}}--align-right {
+.alignRight {
   @apply text-right;
 }
diff --git a/plop-templates/Component/Component.tsx.hbs b/plop-templates/Component/Component.tsx.hbs
index 725c94b12..a1e113a4b 100644
--- a/plop-templates/Component/Component.tsx.hbs
+++ b/plop-templates/Component/Component.tsx.hbs
@@ -1,10 +1,8 @@
 import React, { ReactNode } from "react";
 
-import classNames from "classnames/bind";
+import clsx from "clsx";
 import styles from "./{{pascalCase name}}.module.css";
 
-const cx = classNames.bind(styles);
-
 type Props = {
   /**
    * Child node(s) that can be nested inside component.
@@ -22,7 +20,12 @@ type Props = {
  */
 function {{pascalCase name}}({ children, align }: Props) {
   return (
-    <div className={cx("{{camelCase name}}--container", `{{camelCase name}}--align-${align}`)}>
+    <div
+      className={clsx(
+        styles.container,
+        align === "right" && styles.alignRight,
+      )}
+    >
       {children}
     </div>
   );