From 82f5f1f8076efc4a1d51d26f3fa0d733c0774687 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Tue, 6 Jan 2026 08:56:21 +0100
Subject: [PATCH 1/2] Add Tailwind CSS v4 installation instructions

---
 README.md | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 4942c86..20678d2 100644
--- a/README.md
+++ b/README.md
@@ -67,8 +67,28 @@ let liveSocket = new LiveSocket('/live', Socket, {
 })
 ```
 
-Then, add `'../deps/live_toast/lib/**/*.*ex'` to your list of paths Tailwind will look for class names, in your
-`tailwind.config.js`:
+Then, add the path to the `live_toast` dependency to your list of paths Tailwind will look for class names. This depends on the Tailwind version you are using.
+
+<!-- tabs-open -->
+
+### Tailwind CSS v4
+
+Use this instruction if you use the CSS-first configuration of Tailwind. If your project still has a `tailwind.config.js` file look for the Tailwind CSS v3 instruction.
+
+In your CSS file:
+
+```CSS
+/* assets/css/app.css */
+
+/* add this line */
+@source "../../deps/live_toast/lib/**/*.*ex";
+```
+
+### Tailwind CSS v3
+
+Use this instruction if your project has a `tailwind.config.js` file.
+
+In your `tailwind.config.js` file:
 
 ```javascript
 // assets/tailwind.config.js
@@ -78,12 +98,15 @@ module.exports = {
     './js/**/*.js',
     '../lib/your_app_web.ex',
     '../lib/your_app_web/**/*.*ex',
+    // add this line
     '../deps/live_toast/lib/**/*.*ex',
   ]
 }
 ```
 
-Your particular file will look different but all you need to do is make sure the last line is there.
+<!-- tabs-close -->
+
+Your particular files will look different but all you need to do is make sure the path is there.
 
 > **Note for Umbrella Apps:**
 > If you're using an umbrella application, your paths above may look different. You'll probably have an extra folder in

From c182a94b9bece6ef60f648d25cbeb76cbf3d23fd Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Tue, 6 Jan 2026 09:27:51 +0100
Subject: [PATCH 2/2] Clarify Tailwind v4 instructions in README

---
 README.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 20678d2..b090e71 100644
--- a/README.md
+++ b/README.md
@@ -73,17 +73,19 @@ Then, add the path to the `live_toast` dependency to your list of paths Tailwind
 
 ### Tailwind CSS v4
 
-Use this instruction if you use the CSS-first configuration of Tailwind. If your project still has a `tailwind.config.js` file look for the Tailwind CSS v3 instruction.
+Use this instruction if you use the CSS-first configuration of Tailwind. If your project still has a `tailwind.config.js` file, look for the Tailwind CSS v3 instruction.
 
 In your CSS file:
 
-```CSS
+```css
 /* assets/css/app.css */
 
 /* add this line */
 @source "../../deps/live_toast/lib/**/*.*ex";
 ```
 
+**Note:** The path uses `../../` because CSS files are typically in `assets/css/`.
+
 ### Tailwind CSS v3
 
 Use this instruction if your project has a `tailwind.config.js` file.