Add the alert component base style for html package

packages/material-tailwind-html/theme/base/typography.js

@@ -1,7 +1,7 @@
 const typography = {
   sans: ["Roboto", "sans-serif"],
   serif: ["Roboto Slab", "serif"],
-  body: ["Roboto", "sans-serif"],
+  body: ["Roboto", "sans-serif"]
 };
 
 module.exports = typography;

packages/material-tailwind-html/theme/components/alert/index.js

@@ -0,0 +1,37 @@
+const alertRoot = {
+  position: "relative",
+  padding: "1rem",
+  "margin-bottom": "1rem",
+  border: "0 solid transparent",
+  "border-radius": "0.375rem",
+  "line-height": "1.25rem",
+  opacity: "1",
+  transition: "opacity .15s linear",
+
+  "&.hide": {
+    opacity: "0",
+    display: "none"
+  }
+};
+
+const alertVariant = (theme, background) => ({
+  "background-color": theme(`${background}.500`),
+  color: "#fff",
+
+  "&.alert-gradient": {
+    "background-image": `linear-gradient(to top right, ${theme(
+      `${background}.600`
+    )}, ${theme(`${background}.400`)})`
+  }
+});
+
+const alert = (theme) => ({
+  ".alert": alertRoot,
+  ".alert-pink": alertVariant(theme, "colors.pink"),
+  ".alert-blue": alertVariant(theme, "colors.blue"),
+  ".alert-red": alertVariant(theme, "colors.red"),
+  ".alert-brown": alertVariant(theme, "colors.brown")
+});
+
+module.exports.alertVariant = alertVariant;
+module.exports.alert = alert;

packages/material-tailwind-html/utils/withMT.js

@@ -10,6 +10,7 @@ const shadows = require("../theme/base/shadows");
 
 // components styles
 const { button } = require("../theme/components/button");
+const { alert } = require("../theme/components/alert");
 
 const materialTailwindConfig = {
   darkMode: "class",
@@ -22,6 +23,7 @@ const materialTailwindConfig = {
   plugins: [
     plugin(function ({ addComponents, theme }) {
       addComponents(button(theme));
+      addComponents(alert(theme));
     })
   ]
 };
@@ -48,6 +50,8 @@ function withTM(tailwindConfig) {
     purge = tailwindConfig.purge;
   }
 
+  console.log(materialTailwindConfig);
+
   return merge(
     materialTailwindConfig,
     { ...tailwindConfig, purge },

pages/index.js

@@ -3,7 +3,7 @@ import Button from "../packages/material-tailwind-react/src/components/Button";
 export default function Home() {
   return (
     <div className="p-10">
-      <h4 className="text-3xl font-bold mb-8">Sizes</h4>
+      {/* <h4 className="text-3xl font-bold mb-8">Sizes</h4>
       <div className="flex items-end gap-4 mb-20">
         <Button size="sm">small</Button>
         <Button>medium</Button>
@@ -208,6 +208,27 @@ export default function Home() {
         <Button variant="text" color="red">
           Button No Ripple
         </Button>
+      </div> */}
+
+      <div className="flex items-center gap-4">
+        <button className="button button-pink" data-ripple-light>
+          Button
+        </button>
+        <button
+          className="button button-gradient button-pink"
+          data-ripple-light
+        >
+          Button
+        </button>
+        <button className="button button-outlined button-pink" data-ripple-dark>
+          Button
+        </button>
+        <button className="button button-text button-pink" data-ripple-dark>
+          Button
+        </button>
+        <h2 className="font-sans shadow-md">Hello World</h2>
+
+        <div className="alert alert-gradient alert-brown">Alert primary</div>
       </div>
     </div>
   );

tailwind.config.js

@@ -1,11 +1,19 @@
-const withMT = require("./packages/material-tailwind-react/src/utils/withMT");
+const withMT = require("./packages/material-tailwind-html/utils/withMT");
 
 module.exports = withMT({
   content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}"
   ],
   theme: {
+    colors: {
+      pink: {
+        500: "#ff4444"
+      }
+    },
+    fontFamily: {
+      sans: ["Roboto Slab", "sans-serif"]
+    },
     extend: {}
   },
   plugins: []