From 22a6cbb491e705b5b4412dd13deeb5e9ee701043 Mon Sep 17 00:00:00 2001
From: Annie Hu <annie.hu@chanzuckerberg.com>
Date: Thu, 10 Dec 2020 10:32:47 -0500
Subject: [PATCH] feat: add button examples with twin.macro

---
 packages/components/src/playground/button.tsx |  8 ++++----
 packages/components/tailwind.config.js        | 11 +++++++++++
 2 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 packages/components/tailwind.config.js

diff --git a/packages/components/src/playground/button.tsx b/packages/components/src/playground/button.tsx
index 06cba7997..222d1e5e3 100644
--- a/packages/components/src/playground/button.tsx
+++ b/packages/components/src/playground/button.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { css } from "@linaria/core";
 import { styled } from "@linaria/react";
+import tw from "twin.macro";
 
 // Temporary props for button to test out css options for variants
 type ButtonProps = React.DetailedHTMLProps<
@@ -13,15 +14,14 @@ type ButtonProps = React.DetailedHTMLProps<
 function Button(props: ButtonProps): JSX.Element {
   const { variant = "primary", ...rest } = props;
   const primary = css`
-    --color-background: blue;
+    ${tw`bg-blue-300 hover:bg-blue-400`}
   `;
   const secondary = css`
-    --color-background: gray;
+    ${tw`bg-gray-600 hover:bg-blue-800`}
   `;
 
   const ButtonComponent = styled.button`
-    color: white;
-    background-color: var(--color-background);
+    ${tw`font-bold py-2 px-4 rounded text-white`}
   `;
 
   return (
diff --git a/packages/components/tailwind.config.js b/packages/components/tailwind.config.js
new file mode 100644
index 000000000..baea9bab5
--- /dev/null
+++ b/packages/components/tailwind.config.js
@@ -0,0 +1,11 @@
+const tokens = require("@chanzuckerberg/czedi-kit-tokens/json/variables-nested.json");
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: tokens.eds.color,
+    },
+  },
+  variants: {},
+  plugins: [],
+};