Initial commit

src/components/link.tsx

@@ -0,0 +1,22 @@
+import { Component, JSX } from "solid-js";
+import { LinkProps } from "../types/interfaces";
+
+export const A: Component<LinkProps> = (
+    {
+        to,
+        rel,
+        children,
+        className,
+        id,
+        newTab = true,
+    }): JSX.Element => {
+    return (
+        <a href={ to } id={ id }
+           rel={ `${ rel } ${ newTab ? "noreferrer" : undefined }` }
+           target={ newTab ? "_blank" : undefined }
+           class={ `link ${ className }` }>
+            { children }
+        </a>
+    );
+};
+

src/index.css

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+
+    .link {
+        @apply hover:underline text-blue-500;
+    }
+
+}

src/index.tsx

@@ -0,0 +1,15 @@
+/* @refresh reload */
+import { render } from "solid-js/web";
+
+import "./index.css";
+import type { Component } from "solid-js";
+
+const HomePage: Component = () => {
+    return (
+        <>
+            <p class="text-4xl text-green-700 text-center py-20">Hello tailwind!</p>
+        </>
+    );
+};
+
+render(() => <HomePage />, document.getElementById("root") as HTMLElement);

src/types/interfaces.ts

@@ -0,0 +1,13 @@
+import { JSX } from "solid-js";
+
+export interface ChildProps {
+    children?: JSX.Element,
+    className?: string,
+    id?: string,
+}
+
+export interface LinkProps extends ChildProps {
+    to?: string,
+    rel?: string,
+    newTab?: boolean,
+}