diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index 2b190d05b..cc4be64e4 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -824,3 +824,9 @@ 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 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#sass-less-and-stylus).