Skip to content

Instantly share code, notes, and snippets.

@Faheetah
Created March 15, 2022 16:29
Show Gist options
  • Save Faheetah/e86c8359c4df4133c64633fd3ce28d0a to your computer and use it in GitHub Desktop.
Save Faheetah/e86c8359c4df4133c64633fd3ce28d0a to your computer and use it in GitHub Desktop.
Add Tailwind to Phoenix

Make all the changes described in these files. Delete assets/css/phoenix.css as it is no longer used.

  • config/dev.exs
  • assets/package.json
  • assets/postcss.config.js
  • assets/tailwind.config.js
  • assets/css/app.css
  • mix.exs
diff --git a/assets/css/app.css b/assets/css/app.css
index 24920cf..bbc55be 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1,5 +1,7 @@
/* This file is for your main application CSS */
-@import "./phoenix.css";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
/* Alerts and form errors used by phx.new */
.alert {
diff --git a/config/dev.exs b/config/dev.exs
index 84b133f..4a8f334 100644
--- a/config/dev.exs
+++ b/config/dev.exs
@@ -25,7 +25,15 @@ config :journalr, JournalrWeb.Endpoint,
secret_key_base: "7rIZl6WaY9+Ki7k06O2vp9Zfe7b1vuSmgHYSoKKDrDO4jVLM3m8sbo4kTW1tIKAm",
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
diff --git a/mix.exs b/mix.exs
index ceb6917..d34d81e 100644
--- a/mix.exs
+++ b/mix.exs
@@ -66,7 +66,7 @@ defmodule Journalr.MixProject do
"ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
"ecto.reset": ["ecto.drop", "ecto.setup"],
test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
- "assets.deploy": ["esbuild default --minify", "phx.digest"]
+ "assets.deploy": ["cmd --cd assets npm run deploy", "esbuild default --minify", "phx.digest"]
]
end
end
{
"dependencies": {
"tailwindcss": "^3.0.21"
},
"scripts": {
"deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css"
}
}
{
"dependencies": {
"tailwindcss": "^3.0.21"
},
"scripts": {
"deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css"
}
}
module.exports = {
mode: "jit",
content: ["./js/**/*.js", "../lib/*_web/**/*.*ex"],
theme: {
extend: {
colors: {
yellow: {
100: "#FFFDEE",
},
green: {
100: "#EEFFEE",
},
},
},
},
variants: {
extend: {},
},
plugins: [],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment