Merge pull request #107 from aptinio/tailwind-v4

Update tailwind to version 4.0.0

Author: SteffenDE

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
+      --input=assets/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
 ```
@@ -113,21 +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: "3.2.4",
+  version: "4.0.0",
   default: [
     args: ~w(
-      --config=tailwind.config.js
-      --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__)
   ]
 ```
 
@@ -139,10 +136,10 @@ 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__)
+    cd: Path.expand("../apps/<folder_ending_with_web>", __DIR__)
   ]
 ```
 

config/config.exs

@@ -1,7 +1,7 @@
 import Config
 
 config :tailwind,
-  version: "3.4.6",
+  version: "4.0.0",
   another: [
     args: ["--help"]
   ]

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|, "")}\
       """)

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"
 
   @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
           ),
@@ -123,7 +122,6 @@ defmodule Tailwind do
             version: "#{@latest_version}",
             #{profile}: [
               args: ~w(
-                --config=tailwind.config.js
                 --input=css/app.css
                 --output=../priv/static/assets/app.css
               ),

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
@@ -31,17 +30,16 @@ 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)
 
     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 {
       }