Phoenix Tailwind Hello World! dwyl/technology-stack#94 (comment)

dwyl · Jun 21, 2022 · 24ec6b5 · 24ec6b5
1 parent 93839f9
commit 24ec6b5
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -37,6 +37,7 @@ Use these links to skip stright to the section that interests you:
     - [Create `index.html`](#create-indexhtml)
   - [Part 2: `Tailwind` in `Phoenix`](#part-2-tailwind-in-phoenix)
     - [Build Log (How we got here)](#build-log-how-we-got-here)
+    - [More Detailed Example!](#more-detailed-example)
 
 # Why?
 
@@ -439,13 +440,83 @@ mix deps.get
 ```
 
 
+Once installed, 
+add the following lines to `config/config.exs`
+to pick your tailwind version of choice:
+
+```elixir
+config :tailwind,
+  version: "3.1.0",
+  default: [
+    args: ~w(
+      --config=tailwind.config.js
+      --input=css/app.css
+      --output=../priv/static/assets/app.css
+    ),
+    cd: Path.expand("../assets", __DIR__)
+  ]
+```
+
+Now you can intall the library:
+```sh
+mix tailwind.install
+```
+
+That will create a `assets/tailwind.config.js` file.
+
+
+For development, we want to enable watch mode. 
+So find the `watchers` section in `config/dev.exs` 
+and add:
+
+```elixir
+tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
+```
+
+> **Note**: this enables the file system watcher.
+
+Ensure that the `import "../css/app.css"` line
+is no longer in `assets/js/app.js` 
+(should have automatically been removed by adding `Tailwind` ...)
+
+Finally, back in your `mix.exs`, 
+make sure you have a `assets.deploy` alias for deployments, 
+which will also use the `--minify` option:
+
+```elixir
+"assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
+```
+
+Open the `lib/app_web/templates/page/index.html.heex` 
+and replace the contents with:
+
+```html
+<h1 class="text-7xl text-white font-bold text-center w-full bg-slate-800 rounded-xl shadow-lg py-3 mt-3 ml-3">
+  Hello TailWorld!
+</h1>
+```
+
+Run the `Phoenix` App:
+```sh
+mix phx.server
+```
+
+Visit [**`localhost:4000`**](http://localhost:4000)
+in your web browser:
+
+![image](https://user-images.githubusercontent.com/194400/174838767-20bf201e-3179-4ff9-8d5d-751295d1d069.png)
+
+Those semantic utility class names should give you a _flavour_
+for what to expect in the UI. 
+
+
+### More Detailed Example!
 
 
-We're already using `Tailwind` for our `Phoenix LiveView` Chat Example:
+We're using `Tailwind` for our `Phoenix LiveView` Chat Example:
 https://github.com/dwyl/phoenix-liveview-chat-example
 
 ![liveview-chat-with-tailwind-css](https://user-images.githubusercontent.com/194400/174119023-bb83f5f4-867c-4bfa-a005-26b39c700137.gif)
 
 We think it's _siiiiiiick_!
-So we'll be writing up our notes soon.
-⭐ / 👀 the repo for updates. 
+More examples to follow soon!
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -1,5 +1,8 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
 /* This file is for your main application CSS */
-@import "./phoenix.css";
 
 /* Alerts and form errors used by phx.new */
 .alert {
@@ -118,3 +121,4 @@
   0% { opacity: 1; }
   100% { opacity: 0; }
 }
+
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -1,6 +1,5 @@
 // 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"
 
 // If you want to use Phoenix channels, run `mix help phx.gen.channel`
 // to get started and then uncomment the line below.

diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
@@ -0,0 +1,15 @@
+// See the Tailwind configuration guide for advanced usage
+// https://tailwindcss.com/docs/configuration
+module.exports = {
+  content: [
+    './js/**/*.js',
+    '../lib/*_web.ex',
+    '../lib/*_web/**/*.*ex'
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/forms')
+  ]
+}
diff --git a/config/config.exs b/config/config.exs
@@ -35,3 +35,15 @@ config :phoenix, :json_library, Jason
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{config_env()}.exs"
+
+# github.com/phoenixframework/tailwind
+config :tailwind,
+  version: "3.1.0",
+  default: [
+    args: ~w(
+      --config=tailwind.config.js
+      --input=css/app.css
+      --output=../priv/static/assets/app.css
+    ),
+    cd: Path.expand("../assets", __DIR__)
+  ]
diff --git a/config/dev.exs b/config/dev.exs
@@ -16,7 +16,8 @@ config :app, AppWeb.Endpoint,
   secret_key_base: "jiflHmm2E9IsYXUHV8LWtTtMA842dw1lltt/fXQu7W8XiXNV7lMcFmEAHhqny7qQ",
   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)]},
+    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
   ]
 
 # ## SSL Support

diff --git a/lib/app_web/templates/page/index.html.heex b/lib/app_web/templates/page/index.html.heex
@@ -1,41 +1,3 @@
-<section class="phx-hero">
-  <h1>Welcome to Phoenix!</h1>
-  <p>Peace of mind from prototype to production</p>
-</section>
-
-<section class="row">
-  <article class="column">
-    <h2>Resources</h2>
-    <ul>
-      <li>
-        <a href="https://hexdocs.pm/phoenix/overview.html">Guides &amp; Docs</a>
-      </li>
-      <li>
-        <a href="https://github.com/phoenixframework/phoenix">Source</a>
-      </li>
-      <li>
-        <a href="https://github.com/phoenixframework/phoenix/blob/v1.6/CHANGELOG.md">v1.6 Changelog</a>
-      </li>
-    </ul>
-  </article>
-  <article class="column">
-    <h2>Help</h2>
-    <ul>
-      <li>
-        <a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
-      </li>
-      <li>
-        <a href="https://web.libera.chat/#elixir">#elixir on Libera Chat (IRC)</a>
-      </li>
-      <li>
-        <a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>
-      </li>
-      <li>
-        <a href="https://elixir-slackin.herokuapp.com/">Elixir on Slack</a>
-      </li>
-      <li>
-        <a href="https://discord.gg/elixir">Elixir on Discord</a>
-      </li>
-    </ul>
-  </article>
-</section>
+<h1 class="text-7xl text-white font-bold text-center width-full bg-slate-800 rounded-xl shadow-lg py-3 mt-3 ml-3">
+  Hello TailWorld!
+</h1>
diff --git a/mix.exs b/mix.exs
@@ -71,7 +71,7 @@ defmodule App.MixProject do
     [
       c: ["coveralls.html"],
       setup: ["deps.get"],
-      "assets.deploy": ["esbuild default --minify", "phx.digest"]
+      "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
     ]
   end
 end