petal init

.gitignore

@@ -33,3 +33,4 @@ npm-debug.log
 /assets/node_modules/
 /.idea/
 reaproche.iml
+assets/pnpm-lock.yaml

assets/css/app.css

@@ -1,4 +1,13 @@
-/* This file is for your main application CSS */
+/* Import tailwind - with postcss-import installed */
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+/* custom styles - put after base imports! */
+@import "./custom-styles.css";
+/* import custom components */
+@import "./components/buttons.css";
+/* default phoenix styles - eventually remove */
 @import "./phoenix.css";
 
 /* Alerts and form errors used by phx.new */

assets/css/components/buttons.css

@@ -0,0 +1,8 @@
+@layer components {
+    .btn-redish {
+        @apply bg-red-300 hover:bg-red-600 text-blue-800 font-bold py-2 px-4 rounded;
+    }
+    .btn-greenish {
+        @apply bg-green-300 hover:bg-green-600 text-blue-800 font-bold py-2 px-4 rounded;
+    }
+}

assets/js/app.js

@@ -1,6 +1,6 @@
 // We import the CSS which is extracted to its own file by esbuild.
 // Remove this line if you add a your own CSS build pipeline (e.g postcss).
-import "../css/app.css"
+// import "../css/app.css"
 import Alpine from "alpinejs"
 
 // If you want to use Phoenix channels, run `mix help phx.gen.channel`

assets/package.json

@@ -10,6 +10,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "alpinejs": "^3.10.2"
+    "alpinejs": "^3.10.2",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
+    "postcss-cli": "^9.1.0",
+    "postcss-import": "^14.1.0",
+    "tailwindcss": "^3.0.24"
   }
 }

assets/pnpm-lock.yaml

@@ -1,25 +0,0 @@
-lockfileVersion: 5.4
-
-specifiers:
-  alpinejs: ^3.10.2
-
-dependencies:
-  alpinejs: 3.10.2
-
-packages:
-
-  /@vue/reactivity/3.1.5:
-    resolution: {integrity: sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==}
-    dependencies:
-      '@vue/shared': 3.1.5
-    dev: false
-
-  /@vue/shared/3.1.5:
-    resolution: {integrity: sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==}
-    dev: false
-
-  /alpinejs/3.10.2:
-    resolution: {integrity: sha512-P6DTX78J94FgsskS3eS23s26hfb0NWQZUidBnkUK7fId1x64/kLm5E79lL3HNItUmHDCKOHvfP8EAcuCVab89w==}
-    dependencies:
-      '@vue/reactivity': 3.1.5
-    dev: false

assets/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+        "postcss-import": {},
+        tailwindcss: {},
+        autoprefixer: {},
+    }
+}

assets/tailwind.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+    mode: "jit",
+    purge: [
+        "./js/**/*.js",
+        "../lib/*_web/**/*.*ex"
+    ],
+    theme: {
+        extend: {},
+    },
+    variants: {
+        extend: {},
+    },
+    plugins: [],
+};

config/dev.exs

@@ -16,7 +16,15 @@ config :reaproche, ReaprocheWeb.Endpoint,
   secret_key_base: "zETM0Rou9bkIcitBw/xgVMcpO6TIz+vu0rgaj3TtYoba3zS97DklUIQl2nnf1ELf",
   watchers: [
     # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
-    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}
+    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
+    npx: [
+      "tailwindcss",
+      "--input=css/app.css",
+      "--output=../priv/static/assets/app.css",
+      "--postcss",
+      "--watch",
+      cd: Path.expand("../assets", __DIR__)
+    ]
   ]
 
 # ## SSL Support

lib/reaproche_web/templates/page/index.html.heex

@@ -40,12 +40,53 @@
       </li>
     </ul>
   </article>
-  <section>
+  <section class="grid grid-cols-1 gap-4">
-    <h2>Alpine JS Installed</h2>
+    <!-- tailwind text -->
-    <div x-data="{name:''}">
+    <div>
-      <label for="name">Name:</label>
+      <h2 class="text-red-500 text-5xl font-bold text-center">Tailwind CSS with Alpine JS Dropdown</h2>
-      <input id="name" type="text" x-model="name" />
+    </div>
-      <p><br><b><em>Output:</em></b> <span x-text="name"/></p>
+    <!-- alpinejs dropdown test -->
+    <div x-data="{ open: false }" class="relative text-left">
+      <button
+              @click="open = !open"
+              @keydown.escape.window="open = false"
+              @click.away="open = false"
+              class="flex items-center h-8 pl-3 pr-2 border border-black focus:outline-none">
+  			<span class="text-sm leading-none">
+  					Options
+  			</span>
+        <svg class="w-4 h-4 mt-px ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+        </svg>
+      </button>
+      <div
+              x-cloak
+              x-show="open"
+              x-transition:enter="transition ease-out duration-100"
+              x-transition:enter-start="transform opacity-0 scale-95"
+              x-transition:enter-end="transform opacity-100 scale-100"
+              x-transition:leave="transition ease-in duration-75"
+              x-transition:leave-start="transform opacity-100 scale-100"
+              x-transition:leave-end="transform opacity-0 scale-95"
+              class="absolute flex flex-col w-40 mt-1 border border-black shadow-xs">
+        <a class="flex items-center h-8 px-3 text-sm hover:bg-gray-200" href="#">Settings</a>
+        <a class="flex items-center h-8 px-3 text-sm hover:bg-gray-200" href="#">Support</a>
+        <a class="flex items-center h-8 px-3 text-sm hover:bg-gray-200" href="#">Sign Out</a>
+      </div>
+    </div>
+
+    <!-- alpinejs counter test -->
+    <div>
+      <p class="mt-5 font-bold text-center">Counter with Component Buttons</p>
+    </div>
+    <!--
+      If you want a box around the counter use:
+      <div class="flex items-center justify-center h-screen bg-gray-200">
+    -->
+    <div class="mt-10 flex justify-center" x-data="{ count: 0 }">
+      <button class="btn-redish" x-on:click="count--">Decrement</button>
+      <code>count: </code><code x-text="count"></code>
+      <button class="btn-greenish" x-on:click="count++">Increment</button>
     </div>
   </section>
 </section>