Tailwind comp

src/Button.tsx

@@ -11,7 +11,7 @@ type ButtonComponent = React.FC<Props> & {
 
 export const Button: ButtonComponent = (props) => {
   return (
-    <button className="bg-violet-700 p-6 text-green-200 font-bold text-2xl rounded-sm">
+    <button className="bg-violet-700 p-3 text-green-200 font-bold text-xl rounded-sm">
       {props.title}
     </button>
   );

src/Tailwind.tsx

@@ -0,0 +1,20 @@
+import { useLayoutEffect } from "react";
+
+export function Tailwind() {
+  useLayoutEffect(() => {
+    // Check if Tailwind CSS script already exists
+    if (!document.querySelector('script[src="https://cdn.tailwindcss.com"]')) {
+      // Create a script element
+      const script = document.createElement("script");
+      script.src = "https://cdn.tailwindcss.com";
+      script.async = true;
+      document.head.appendChild(script); // Append to head instead of body
+      // Clean up the script when the component unmounts
+      return () => {
+        document.head.removeChild(script);
+      };
+    }
+  }, []);
+
+  return <></>;
+}

src/index.ts

@@ -1,5 +1,4 @@
-export * from "./consts";
-export * from "./Box";
+export * from "./Tailwind";
 export * from "./Button";
 
 export * from "./inputs/Input";

src/inputs/Input.tsx

@@ -1,7 +1,7 @@
 import { ControlType } from "framer";
 
 export function Input({ placeholder }) {
-  return <input placeholder={placeholder} />;
+  return <input placeholder={placeholder} className="border p-2" />;
 }
 
 Input.propertyControls = {