From 023211c9dacdc0753343bda1ca45f8b7f2b6dc30 Mon Sep 17 00:00:00 2001
From: Steve McNiven-Scott <steve@sitefinitysteve.com>
Date: Fri, 18 Apr 2025 09:20:02 -0400
Subject: [PATCH 1/3] Update readme with tailwind 4

---
 README.md | 162 +++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 106 insertions(+), 56 deletions(-)

diff --git a/README.md b/README.md
index ae33f4c..2f2f31d 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # @nativescript/tailwind
 
-> **Warning**: :warning: `@nativescript/core@8.2.0` is required for colors to work properly You may see wrong colors on older core versions, because Tailwind CSS v3 uses the RGB/A color notation, which has been implemented for 8.2.0 and prior versions don't support it.
+> **Warning**: :warning: For **Tailwind CSS v3**, `@nativescript/core@8.2.0` is required for colors to work properly. You may see wrong colors on older core versions, because Tailwind CSS v3 uses the RGB/A color notation, which has been implemented for 8.2.0. **Tailwind CSS v4** uses Lightning CSS which handles this automatically.
 
 Makes using [Tailwind CSS](https://tailwindcss.com/) in NativeScript a whole lot easier!
 
@@ -15,93 +15,143 @@ Makes using [Tailwind CSS](https://tailwindcss.com/) in NativeScript a whole lot
 
 ## Usage
 
-> **Note:** This guide assumes you are using `@nativescript/webpack@5.x` as some configuration is done automatically. If you have not upgraded yet, please read the docs below for usage with older `@nativescript/webpack` versions.
+> **Note:** This guide assumes you are using `@nativescript/webpack@5.x` or higher. If you have not upgraded yet, please read the docs below for usage with older `@nativescript/webpack` versions (applicable to Tailwind CSS v3).
 
-Install `@nativescript/tailwind` and `tailwindcss`
+### Tailwind CSS v4
 
-```cli
-npm install --save @nativescript/tailwind tailwindcss
-```
+Tailwind CSS v4 [support](https://github.com/NativeScript/tailwind/pull/194) simplifies the setup significantly over v3. 
 
-Generate a `tailwind.config.js` with
+**Install dependencies:**
 
-```cli
-npx tailwindcss init
-```
+    ```cli
+    npm install --save @nativescript/tailwind tailwindcss
+    ```
 
-When the [NativeScript CLI](https://github.com/NativeScript/nativescript-cli) creates a new project, it may put code into a `src` folder instead of the  `app` referenced below. Adjust `content`, `darkMode`, `corePlugins` plus any other settings you need. Here are the values we recommend. If you're struggling to get Tailwind working for the first time, check the `content` setting.
+**Import Tailwind:** Add the following to your `app.css` or `app.scss`:
 
-```js
-// tailwind.config.js
-const plugin = require('tailwindcss/plugin');
+    ```css
+    @import 'tailwindcss';
+    ```
 
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  // check this setting first for initial setup issues
-  content: [
-    './app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
-  ],
-  // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.
-  darkMode: ['class', '.ns-dark'],
-  theme: {
-    extend: {},
-  },
-  plugins: [
-    /**
-     * A simple inline plugin that adds the ios: and android: variants
-     * 
-     * Example usage: 
-     *
-     *   <Label class="android:text-red-500 ios:text-blue-500" />
-     *
-     */
-    plugin(function ({ addVariant }) {
-      addVariant('android', '.ns-android &');
-      addVariant('ios', '.ns-ios &');
-    }),
-  ],
-  corePlugins: {
-    preflight: false // disables browser-specific resets
-  }
-}
-```
+#### Upgrading from Tailwind CSS 3
 
-Change your `app.css` or `app.scss` to include the tailwind utilities
+**Update dependencies:**
 
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
+    ```cli
+    npm install --save tailwindcss@latest
+    ```
+
+Open your `app.css` or `app.scss` and replace any existing Tailwind imports with:
+
+    ```css
+    @import 'tailwindcss';
+    ```
+
+### Tailwind CSS v3 
+
+If you need to use Tailwind CSS v3, follow these steps:
+
+**Install dependencies:**
+
+    ```cli
+    npm install --save @nativescript/tailwind tailwindcss
+    ```
+
+**Generate `tailwind.config.js`:**
+
+    ```cli
+    npx tailwindcss init
+    ```
+
+**Configure `tailwind.config.js`:** When the [NativeScript CLI](https://github.com/NativeScript/nativescript-cli) creates a new project, it may put code into a `src` folder instead of the `app` referenced below. Adjust `content`, `darkMode`, `corePlugins` plus any other settings you need. Here are the values we recommend. **If you're struggling to get Tailwind working for the first time, check the `content` setting.**
+
+    ```js
+    // tailwind.config.js
+    const plugin = require('tailwindcss/plugin');
+
+    /** @type {import('tailwindcss').Config} */
+    module.exports = {
+      // check this setting first for initial setup issues
+      content: [
+        './app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
+      ],
+      // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.
+      darkMode: ['class', '.ns-dark'],
+      theme: {
+        extend: {},
+      },
+      plugins: [
+        /**
+         * A simple inline plugin that adds the ios: and android: variants
+         * 
+         * Example usage: 
+         *
+         *   <Label class="android:text-red-500 ios:text-blue-500" />
+         *
+         */
+        plugin(function ({ addVariant }) {
+          addVariant('android', '.ns-android &');
+          addVariant('ios', '.ns-ios &');
+        }),
+      ],
+      corePlugins: {
+        preflight: false // disables browser-specific resets
+      }
+    }
+    ```
+
+**Include Tailwind directives:** Change your `app.css` or `app.scss` to include the tailwind directives:
+
+    ```css
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+    ```
 
 Start using tailwind in your app.
 
 ### Using a custom PostCSS config
 
-In case you need to customize the postcss configuration, you can create a `postcss.config.js` (other formats are supported, see https://github.com/webpack-contrib/postcss-loader#config-files) file and add any customizations, for example:
+Manual PostCSS configuration is typically **not required** for **Tailwind CSS v4**. `@nativescript/tailwind` handles the necessary setup automatically.
+
+However, if you need to add *other* PostCSS plugins alongside Tailwind v4, create a `postcss.config.js` (or other supported formats, see https://github.com/webpack-contrib/postcss-loader#config-files) and include `@nativescript/tailwind`:
+
+```js
+// postcss.config.js (Example for v4 with other plugins)
+
+module.exports = {
+  plugins: [
+    "@nativescript/tailwind", // Handles Tailwind v4 setup
+    // Add other PostCSS plugins here
+    "@csstools/postcss-is-pseudo-class" 
+  ],
+};
+```
+
+For **Tailwind CSS v3**, if you need to customize the postcss configuration (e.g., use a custom `tailwind.config.custom.js`), you can create a `postcss.config.js` file.
 
 ```js
-// postcss.config.js
+// postcss.config.js (Example for v3 customization)
 
 module.exports = {
   plugins: [
     ["tailwindcss", { config: "./tailwind.config.custom.js" }],
     "@nativescript/tailwind",
-    "@csstools/postcss-is-pseudo-class"
+    // Add other PostCSS plugins here
+    "@csstools/postcss-is-pseudo-class" 
   ],
 };
 ```
 
-> **Note:** if you want to apply customizations to `tailwindcss` or `@nativescript/tailwind`, you will need to disable autoloading:
+> **Note (Tailwind CSS v3):** If you want to apply customizations to `tailwindcss` or `@nativescript/tailwind` in v3 using a custom PostCSS config, you will need to disable autoloading:
 > 
 > ```cli
 > ns config set tailwind.autoload false
 > ```
-> This is required only if you make changes to either of the 2 plugins - because by default `postcss-loader` processes the config file first, and then the `postcssOptions` passed to it. With autoloading enabled, any customizations will be overwritten due to the loading order. Setting `tailwind.autoload` to `false` just disables the internal loading of these plugins, and requires you to manually add them to your postcss config in the above order.
 
 ## Usage with older @nativescript/webpack versions
 
-This usage is considered legacy and will not be supported - however we are documenting it here in case your project is still using older `@nativescript/webpack`.
+This usage is considered legacy and will not be supported - however we are documenting it here in case your project is still using older `@nativescript/webpack`. **This applies to Tailwind CSS v3 setups.**
 
 <details>
 

From 30bd07579c39cc62d34b10288d2f5b42f2b9fa20 Mon Sep 17 00:00:00 2001
From: Steve McNiven-Scott <steve@sitefinitysteve.com>
Date: Fri, 18 Apr 2025 09:21:42 -0400
Subject: [PATCH 2/3] fix: improve clarity in README for Tailwind CSS v4 setup
 instructions

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2f2f31d..f30b6c6 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ Makes using [Tailwind CSS](https://tailwindcss.com/) in NativeScript a whole lot
 
 ### Tailwind CSS v4
 
-Tailwind CSS v4 [support](https://github.com/NativeScript/tailwind/pull/194) simplifies the setup significantly over v3. 
+If you need to use Tailwind CSS v4, follow these steps. Tailwind CSS v4 [support](https://github.com/NativeScript/tailwind/pull/194) simplifies the setup significantly over v3.
 
 **Install dependencies:**
 

From 5a1b80804324312a11304b0c96811c008ba5c786 Mon Sep 17 00:00:00 2001
From: Steve McNiven-Scott <steve@sitefinitysteve.com>
Date: Fri, 18 Apr 2025 09:23:51 -0400
Subject: [PATCH 3/3] Repair the markdown code sections

---
 README.md | 114 +++++++++++++++++++++++++++---------------------------
 1 file changed, 57 insertions(+), 57 deletions(-)

diff --git a/README.md b/README.md
index f30b6c6..4e6e19c 100644
--- a/README.md
+++ b/README.md
@@ -23,29 +23,29 @@ If you need to use Tailwind CSS v4, follow these steps. Tailwind CSS v4 [support
 
 **Install dependencies:**
 
-    ```cli
-    npm install --save @nativescript/tailwind tailwindcss
-    ```
+```cli
+npm install --save @nativescript/tailwind tailwindcss
+```
 
 **Import Tailwind:** Add the following to your `app.css` or `app.scss`:
 
-    ```css
-    @import 'tailwindcss';
-    ```
+```css
+@import 'tailwindcss';
+```
 
 #### Upgrading from Tailwind CSS 3
 
 **Update dependencies:**
 
-    ```cli
-    npm install --save tailwindcss@latest
-    ```
+```cli
+npm install --save tailwindcss@latest
+```
 
 Open your `app.css` or `app.scss` and replace any existing Tailwind imports with:
 
-    ```css
-    @import 'tailwindcss';
-    ```
+```css
+@import 'tailwindcss';
+```
 
 ### Tailwind CSS v3 
 
@@ -53,60 +53,60 @@ If you need to use Tailwind CSS v3, follow these steps:
 
 **Install dependencies:**
 
-    ```cli
-    npm install --save @nativescript/tailwind tailwindcss
-    ```
+```cli
+npm install --save @nativescript/tailwind tailwindcss
+```
 
 **Generate `tailwind.config.js`:**
 
-    ```cli
-    npx tailwindcss init
-    ```
+```cli
+npx tailwindcss init
+```
 
 **Configure `tailwind.config.js`:** When the [NativeScript CLI](https://github.com/NativeScript/nativescript-cli) creates a new project, it may put code into a `src` folder instead of the `app` referenced below. Adjust `content`, `darkMode`, `corePlugins` plus any other settings you need. Here are the values we recommend. **If you're struggling to get Tailwind working for the first time, check the `content` setting.**
 
-    ```js
-    // tailwind.config.js
-    const plugin = require('tailwindcss/plugin');
-
-    /** @type {import('tailwindcss').Config} */
-    module.exports = {
-      // check this setting first for initial setup issues
-      content: [
-        './app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
-      ],
-      // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.
-      darkMode: ['class', '.ns-dark'],
-      theme: {
-        extend: {},
-      },
-      plugins: [
-        /**
-         * A simple inline plugin that adds the ios: and android: variants
-         * 
-         * Example usage: 
-         *
-         *   <Label class="android:text-red-500 ios:text-blue-500" />
-         *
-         */
-        plugin(function ({ addVariant }) {
-          addVariant('android', '.ns-android &');
-          addVariant('ios', '.ns-ios &');
-        }),
-      ],
-      corePlugins: {
-        preflight: false // disables browser-specific resets
-      }
-    }
-    ```
+```js
+// tailwind.config.js
+const plugin = require('tailwindcss/plugin');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // check this setting first for initial setup issues
+  content: [
+    './app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
+  ],
+  // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.
+  darkMode: ['class', '.ns-dark'],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    /**
+     * A simple inline plugin that adds the ios: and android: variants
+     * 
+     * Example usage: 
+     *
+     *   <Label class="android:text-red-500 ios:text-blue-500" />
+     *
+     */
+    plugin(function ({ addVariant }) {
+      addVariant('android', '.ns-android &');
+      addVariant('ios', '.ns-ios &');
+    }),
+  ],
+  corePlugins: {
+    preflight: false // disables browser-specific resets
+  }
+}
+```
 
 **Include Tailwind directives:** Change your `app.css` or `app.scss` to include the tailwind directives:
 
-    ```css
-    @tailwind base;
-    @tailwind components;
-    @tailwind utilities;
-    ```
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
 
 Start using tailwind in your app.