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
Created
March 15, 2022 16:29
-
-
Save Faheetah/e86c8359c4df4133c64633fd3ce28d0a to your computer and use it in GitHub Desktop.
Add Tailwind to Phoenix
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "dependencies": { | |
| "tailwindcss": "^3.0.21" | |
| }, | |
| "scripts": { | |
| "deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "dependencies": { | |
| "tailwindcss": "^3.0.21" | |
| }, | |
| "scripts": { | |
| "deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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