feat (tailwind): new tailwind framework

santanche · Jul 26, 2023 · 064e685 · 064e685
1 parent 27c8262
commit 064e685
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 0 deletions.
diff --git a/frameworks/tailwind/README.md b/frameworks/tailwind/README.md
@@ -0,0 +1,25 @@
+---
+permalink: /frameworks/tailwind/
+layout: single
+---
+
+Tailwind CSS
+============
+
+[Tailwind CSS](https://tailwindcss.com/) is a tool to manage CSS based on the principle of CSS classes related to atomic styles.
+
+Installing and a configuring Tailwind CSS according to the [Get started with Tailwind CSS](https://tailwindcss.com/docs/installation).
+
+Basic steps to install on Tailwind CSS.
+
+# Summary of Installation Commands
+
+~~~
+npm install -D tailwindcss
+npx tailwindcss init
+~~~
+
+
+~~~
+npx tailwindcss -i ./src/main-tw.css -o ./dist/main.css --watch
+~~~
diff --git a/javascript/advanced/js/tagged-template.js b/javascript/advanced/js/tagged-template.js
@@ -0,0 +1,17 @@
+const html = (strings, ...values) => {return { raw: strings, values }}
+
+const title = 'My Title'
+const message = 'My Message'
+
+const doc = html`<!DOCTYPE html>
+  <html lang="en-US">
+    <head>
+      <title>${title}</title>
+    </head>
+    <body>
+      <h1>${message}</h1>
+    </body>
+  </html>`;
+
+console.log('=== doc')
+console.log(doc)
diff --git a/javascript/advanced/tagged-template.html b/javascript/advanced/tagged-template.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <h1>Tagged Template</h1>
+    <script type="text/javascript" src="js/tagged-template.js">
+    </script>
+  </body>
+</html>