From 903bc5dccca693325b2afb9e9c0dfa0451833e57 Mon Sep 17 00:00:00 2001 From: Leif Metcalf Date: Thu, 28 Nov 2024 18:17:07 +1300 Subject: [PATCH 1/3] Update tailwind to version 4.0.0 Previously the README recommended running the tailwind executable from the assets directory in the `mix tailwind` task. Since tailwind 4.0.0 searches for source files in the directory it is run from, we instead recommend running the executable from the parent directory. --- README.md | 16 +++++++------- config/config.exs | 2 +- lib/mix/tasks/tailwind.install.ex | 35 +++++-------------------------- lib/tailwind.ex | 4 +--- test/tailwind_test.exs | 10 ++++----- 5 files changed, 19 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index 490b13c..061dae6 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ Once installed, change your `config/config.exs` to pick your tailwind version of choice: ```elixir -config :tailwind, version: "3.2.4" +config :tailwind, version: "4.0.0" ``` Now you can install tailwind by running: @@ -74,14 +74,13 @@ directory, the OS environment, and default arguments to the ```elixir config :tailwind, - version: "3.2.4", + version: "4.0.0", default: [ args: ~w( - --config=tailwind.config.js --input=css/app.css --output=../priv/static/assets/app.css ), - cd: Path.expand("../assets", __DIR__) + cd: Path.expand("..", __DIR__) ] ``` @@ -100,8 +99,8 @@ First add it as a dependency in your `mix.exs`: ```elixir def deps do [ - {:phoenix, "~> 1.6"}, - {:tailwind, "~> 0.1.8", runtime: Mix.env() == :dev} + {:phoenix, "~> 1.7"}, + {:tailwind, "~> 0.2.4", runtime: Mix.env() == :dev} ] end ``` @@ -120,10 +119,9 @@ as our css entry point: ```elixir config :tailwind, - version: "3.2.4", + version: "4.0.0", default: [ args: ~w( - --config=tailwind.config.js --input=css/app.css --output=../priv/static/assets/app.css ), @@ -139,7 +137,7 @@ the web application's asset directory in the configuration: ```elixir config :tailwind, - version: "3.2.4", + version: "4.0.0", default: [ args: ..., cd: Path.expand("../apps//assets", __DIR__) diff --git a/config/config.exs b/config/config.exs index 7168f73..67ca820 100644 --- a/config/config.exs +++ b/config/config.exs @@ -1,7 +1,7 @@ import Config config :tailwind, - version: "3.4.6", + version: "4.0.0-beta.3", another: [ args: ["--help"] ] diff --git a/lib/mix/tasks/tailwind.install.ex b/lib/mix/tasks/tailwind.install.ex index b975a4e..8b4f23e 100644 --- a/lib/mix/tasks/tailwind.install.ex +++ b/lib/mix/tasks/tailwind.install.ex @@ -75,36 +75,9 @@ defmodule Mix.Tasks.Tailwind.Install do else if Keyword.get(opts, :assets, true) do File.mkdir_p!("assets/css") - tailwind_config_path = Path.expand("assets/tailwind.config.js") prepare_app_css() prepare_app_js() - - unless File.exists?(tailwind_config_path) do - File.write!(tailwind_config_path, """ - // See the Tailwind configuration guide for advanced usage - // https://tailwindcss.com/docs/configuration - - let plugin = require('tailwindcss/plugin') - - module.exports = { - content: [ - './js/**/*.js', - '../lib/*_web.ex', - '../lib/*_web/**/*.*ex' - ], - theme: { - extend: {}, - }, - plugins: [ - require('@tailwindcss/forms'), - plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])), - plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])), - plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &'])) - ] - } - """) - end end if function_exported?(Mix, :ensure_application!, 1) do @@ -131,9 +104,11 @@ defmodule Mix.Tasks.Tailwind.Install do unless app_css =~ "tailwind" do File.write!("assets/css/app.css", """ - @import "tailwindcss/base"; - @import "tailwindcss/components"; - @import "tailwindcss/utilities"; + @import "tailwindcss"; + @plugin "@tailwindcss/forms"; + @variant phx-click-loading ([".phx-click-loading&", ".phx-click-loading &"]); + @variant phx-submit-loading ([".phx-submit-loading&", ".phx-submit-loading &"]); + @variant phx-change-loading ([".phx-change-loading&", ".phx-change-loading &"]); #{String.replace(app_css, ~s|@import "./phoenix.css";\n|, "")}\ """) diff --git a/lib/tailwind.ex b/lib/tailwind.ex index 855db13..dc47b68 100644 --- a/lib/tailwind.ex +++ b/lib/tailwind.ex @@ -1,6 +1,6 @@ defmodule Tailwind do # https://github.com/tailwindlabs/tailwindcss/releases - @latest_version "3.4.6" + @latest_version "4.0.0-beta.3" @moduledoc """ Tailwind is an installer and runner for [tailwind](https://tailwindcss.com/). @@ -15,7 +15,6 @@ defmodule Tailwind do version: "#{@latest_version}", default: [ args: ~w( - --config=tailwind.config.js --input=css/app.css --output=../priv/static/assets/app.css ), @@ -126,7 +125,6 @@ defmodule Tailwind do version: "#{@latest_version}", #{profile}: [ args: ~w( - --config=tailwind.config.js --input=css/app.css --output=../priv/static/assets/app.css ), diff --git a/test/tailwind_test.exs b/test/tailwind_test.exs index 6bf571d..432f864 100644 --- a/test/tailwind_test.exs +++ b/test/tailwind_test.exs @@ -7,7 +7,6 @@ defmodule TailwindTest do Application.put_env(:tailwind, :version, @version) File.mkdir_p!("assets/js") File.mkdir_p!("assets/css") - File.rm("assets/tailwind.config.js") File.rm("assets/css/app.css") :ok end @@ -41,7 +40,6 @@ defmodule TailwindTest do Application.delete_env(:tailwind, :version) Mix.Task.rerun("tailwind.install", ["--if-missing"]) - assert File.exists?("assets/tailwind.config.js") assert File.read!("assets/css/app.css") =~ "tailwind" assert ExUnit.CaptureIO.capture_io(fn -> @@ -66,9 +64,11 @@ defmodule TailwindTest do expected_css = String.trim(""" - @import "tailwindcss/base"; - @import "tailwindcss/components"; - @import "tailwindcss/utilities"; + @import "tailwindcss"; + @plugin "@tailwindcss/forms"; + @variant phx-click-loading ([".phx-click-loading&", ".phx-click-loading &"]); + @variant phx-submit-loading ([".phx-submit-loading&", ".phx-submit-loading &"]); + @variant phx-change-loading ([".phx-change-loading&", ".phx-change-loading &"]); body { } From c4a157159688323a4ad47de0585df1ac49873d2c Mon Sep 17 00:00:00 2001 From: Aaron Tinio Date: Sat, 25 Jan 2025 10:22:36 +0800 Subject: [PATCH 2/3] Bump versions now that Tailwind CSS v4.0 is out Also, bump old version used to test updates. It might help if GitHub does any sort of caching of release assets. --- config/config.exs | 2 +- lib/tailwind.ex | 2 +- test/tailwind_test.exs | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/config/config.exs b/config/config.exs index 67ca820..b0fae7c 100644 --- a/config/config.exs +++ b/config/config.exs @@ -1,7 +1,7 @@ import Config config :tailwind, - version: "4.0.0-beta.3", + version: "4.0.0", another: [ args: ["--help"] ] diff --git a/lib/tailwind.ex b/lib/tailwind.ex index dc47b68..3125da4 100644 --- a/lib/tailwind.ex +++ b/lib/tailwind.ex @@ -1,6 +1,6 @@ defmodule Tailwind do # https://github.com/tailwindlabs/tailwindcss/releases - @latest_version "4.0.0-beta.3" + @latest_version "4.0.0" @moduledoc """ Tailwind is an installer and runner for [tailwind](https://tailwindcss.com/). diff --git a/test/tailwind_test.exs b/test/tailwind_test.exs index 432f864..f583bac 100644 --- a/test/tailwind_test.exs +++ b/test/tailwind_test.exs @@ -30,12 +30,12 @@ defmodule TailwindTest do end test "updates on install" do - Application.put_env(:tailwind, :version, "3.0.3") + Application.put_env(:tailwind, :version, "3.4.17") Mix.Task.rerun("tailwind.install", ["--if-missing"]) assert ExUnit.CaptureIO.capture_io(fn -> assert Tailwind.run(:default, ["--help"]) == 0 - end) =~ "3.0.3" + end) =~ "3.4.17" Application.delete_env(:tailwind, :version) From c5fa5325f48fe10a1e0106d9bb4af890f088f429 Mon Sep 17 00:00:00 2001 From: Aaron Tinio Date: Mon, 27 Jan 2025 17:42:14 +0800 Subject: [PATCH 3/3] Fix paths in README.md and remove mention of js-based config --- README.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 061dae6..4ba39a0 100644 --- a/README.md +++ b/README.md @@ -77,8 +77,8 @@ config :tailwind, version: "4.0.0", default: [ args: ~w( - --input=css/app.css - --output=../priv/static/assets/app.css + --input=assets/css/app.css + --output=priv/static/assets/app.css ), cd: Path.expand("..", __DIR__) ] @@ -112,20 +112,19 @@ alias for deployments (with the `--minify` option): "assets.deploy": ["tailwind default --minify", ..., "phx.digest"] ``` -Now let's change `config/config.exs` to tell `tailwind` to use -configuration in `assets/tailwind.config.js` for building our css -bundle into `priv/static/assets`. We'll also give it our `assets/css/app.css` -as our css entry point: +Now let's change `config/config.exs` to tell `tailwind` +to build our css bundle into `priv/static/assets`. +We'll also give it our `assets/css/app.css` as our css entry point: ```elixir config :tailwind, version: "4.0.0", default: [ args: ~w( - --input=css/app.css - --output=../priv/static/assets/app.css + --input=assets/css/app.css + --output=priv/static/assets/app.css ), - cd: Path.expand("../assets", __DIR__) + cd: Path.expand("..", __DIR__) ] ``` @@ -140,7 +139,7 @@ config :tailwind, version: "4.0.0", default: [ args: ..., - cd: Path.expand("../apps//assets", __DIR__) + cd: Path.expand("../apps/", __DIR__) ] ```