Add tailwindcss example

ije · ije · commit 6c110a708cfa · 2021-09-02T02:10:35.000+08:00
diff --git a/examples/tailwindcss/aleph.config.ts b/examples/tailwindcss/aleph.config.ts
@@ -0,0 +1,6 @@
+import type { Config } from 'aleph/types'
+import windicss from 'https://deno.land/x/aleph_plugin_windicss@v0.0.1/plugin.ts'
+
+export default <Config>{
+  plugins: [windicss]
+}
diff --git a/examples/tailwindcss/app.tsx b/examples/tailwindcss/app.tsx
@@ -0,0 +1,12 @@
+import React, { ComponentType } from 'react'
+
+export default function App({ Page, pageProps }: { Page: ComponentType<any>, pageProps: any }) {
+  return (
+    <main>
+      <head>
+        <meta name="viewport" content="width=device-width" />
+      </head>
+      <Page {...pageProps} />
+    </main>
+  )
+}
diff --git a/examples/tailwindcss/pages/index.tsx b/examples/tailwindcss/pages/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+export default function Index() {
+  return (
+    <div className="w-screen h-screen flex items-center justify-center">
+      <div className="py-8 px-8 max-w-md mx-auto bg-white rounded-xl shadow-md space-y-6 sm:(py-4 space-y-0 space-x-6)">
+        <img className="block mx-auto h-24 rounded-full sm:(mx-0 flex-shrink-0)" src="/logo.svg" alt="Aleph.js" />
+        <div className="text-center space-y-2 sm:text-left">
+          <div className="space-y-0.1">
+            <p className="text-lg text-black font-semibold">Aleph.js</p>
+            <p className="text-gray-500 font-medium">CSS Powered by Windi.</p>
+          </div>
+          <a
+            href="https://alephjs.org/docs/get-started"
+            className="inline-block px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:(text-white bg-purple-600 border-transparent) focus:(outline-none ring-2 ring-purple-600 ring-offset-2)"
+          >
+            Get started
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/tailwindcss/public/logo.svg b/examples/tailwindcss/public/logo.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#D63369;stroke-width:3;stroke-miterlimit:10;}
+</style>
+<g id="Aleph">
+	<path class="st0" d="M54.8,11.1C68.2,34.3,81.6,57.5,95,80.7c-1.6,2.7-3.3,5.5-4.9,8.2c-26.8,0-53.7,0-80.5,0
+		c-1.5-2.7-3.1-5.4-4.6-8.1c13.4-23.2,26.8-46.5,40.3-69.7C48.4,11.1,51.6,11.1,54.8,11.1z"/>
+	<polyline class="st0" points="28.2,72.8 80.8,72.8 45.1,11.1 	"/>
+	<polyline class="st0" points="71.5,72.7 45.2,27.2 9.6,88.9 	"/>
+	<polyline class="st0" points="49.8,35.3 23.5,80.8 94.8,80.8 	"/>
+</g>
+</svg>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +import type { Config } from 'aleph/types'
 +import windicss from 'https://deno.land/x/[email protected]/plugin.ts'
++
 +export default <Config>{
 +  plugins: [windicss]
 +}