From 6b8ee751c6f13994cad583132ee712ace0cacc71 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 19 May 2025 16:33:49 -0400 Subject: [PATCH 1/5] Add note about preprocessors to the upgrade guide --- src/docs/upgrade-guide.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index 2b190d05b..409f60f94 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -824,3 +824,7 @@ Alternatively, you can use your CSS theme variables directly instead of using `@ ``` You can find more documentation on [using Tailwind with CSS modules](/docs/compatibility#css-modules). + +### Using Sass, Less, and Stylus + +Tailwind CSS v4.0 is [not designed to be used with CSS preprocessors](https://tailwindcss.com/docs/compatibility#sass-less-and-stylus) like Sass, Less, or Stylus. **Think of Tailwind CSS itself as your preprocessor** — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus. Because of this it is not possible to use Sass, Less, or Stylus for your stylesheets or `` blocks in Vue, Svelte, Astro, etc… From a0e50398005f2dd97aec699c654c5d372c424531 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 20 May 2025 14:19:39 -0400 Subject: [PATCH 2/5] Tweak copy --- src/docs/upgrade-guide.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index 409f60f94..ada082ac9 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -827,4 +827,4 @@ You can find more documentation on [using Tailwind with CSS modules](/docs/compa ### Using Sass, Less, and Stylus -Tailwind CSS v4.0 is [not designed to be used with CSS preprocessors](https://tailwindcss.com/docs/compatibility#sass-less-and-stylus) like Sass, Less, or Stylus. **Think of Tailwind CSS itself as your preprocessor** — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus. Because of this it is not possible to use Sass, Less, or Stylus for your stylesheets or `` blocks in Vue, Svelte, Astro, etc… +Tailwind CSS v4.0 is [not designed to be used with CSS preprocessors](https://tailwindcss.com/docs/compatibility#sass-less-and-stylus) like Sass, Less, or Stylus. Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus. Because of this it is not possible to use Sass, Less, or Stylus for your stylesheets or `` blocks in Vue, Svelte, Astro, etc. From b3538bbd24e453cd3a6a63126064b090eebbcae7 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 20 May 2025 14:32:04 -0400 Subject: [PATCH 3/5] Tweak --- src/docs/upgrade-guide.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index ada082ac9..34da34a3b 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -827,4 +827,6 @@ You can find more documentation on [using Tailwind with CSS modules](/docs/compa ### Using Sass, Less, and Stylus -Tailwind CSS v4.0 is [not designed to be used with CSS preprocessors](https://tailwindcss.com/docs/compatibility#sass-less-and-stylus) like Sass, Less, or Stylus. Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus. Because of this it is not possible to use Sass, Less, or Stylus for your stylesheets or `` blocks in Vue, Svelte, Astro, etc. +Tailwind CSS v4.0 is not designed to be used with CSS preprocessors like Sass, Less, or Stylus. Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus. Because of this it is not possible to use Sass, Less, or Stylus for your stylesheets or `` blocks in Vue, Svelte, Astro, etc. + +Learn more in the [compatibility documentation](https://tailwindcss.com/docs/compatibility). From 2f5801ff21b145e8495ebed48b370e9887838686 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 20 May 2025 14:32:16 -0400 Subject: [PATCH 4/5] Update url --- src/docs/upgrade-guide.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index 34da34a3b..b3b6938f5 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -829,4 +829,4 @@ You can find more documentation on [using Tailwind with CSS modules](/docs/compa Tailwind CSS v4.0 is not designed to be used with CSS preprocessors like Sass, Less, or Stylus. Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus. Because of this it is not possible to use Sass, Less, or Stylus for your stylesheets or `` blocks in Vue, Svelte, Astro, etc. -Learn more in the [compatibility documentation](https://tailwindcss.com/docs/compatibility). +Learn more in the [compatibility documentation](/docs/compatibility). From 8f622ee9af4e9698b65c3d03466b6b10b91407cb Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 20 May 2025 14:32:38 -0400 Subject: [PATCH 5/5] Add fragment back --- src/docs/upgrade-guide.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index b3b6938f5..cc4be64e4 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -829,4 +829,4 @@ You can find more documentation on [using Tailwind with CSS modules](/docs/compa Tailwind CSS v4.0 is not designed to be used with CSS preprocessors like Sass, Less, or Stylus. Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus. Because of this it is not possible to use Sass, Less, or Stylus for your stylesheets or `` blocks in Vue, Svelte, Astro, etc. -Learn more in the [compatibility documentation](/docs/compatibility). +Learn more in the [compatibility documentation](/docs/compatibility#sass-less-and-stylus).