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.
phoenixframework · Nov 29, 2024 · 6f3182e · 6f3182e
1 parent 194ab0f
commit 6f3182e
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 48 deletions.
diff --git 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/<folder_ending_with_web>/assets", __DIR__)

diff --git 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
@@ -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
@@ -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
@@ -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 {
       }