feat: tailwind v4

src/content/docs/en/guides/integrations-guide/tailwind.mdx

@@ -12,6 +12,12 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 
 This **[Astro integration][astro-integration]** brings [Tailwind's](https://tailwindcss.com/) utility CSS classes to every `.astro` file and [framework component](/en/guides/framework-components/) in your project, along with support for the Tailwind configuration file.
 
+:::caution[Deprecation notice]
+Tailwind CSS now offers a Vite plugin so this version of the integration is provided as a convenience if you're unable to upgrade to the Vite plugin at this time. Otherwise, we recommend you uninstall the integration and follow the [Tailwind documentation](https://tailwindcss.com/docs/installation/framework-guides/astro).
+
+From Astro 5.x.x, running `astro add tailwind` setups the Vite plugin automatically.
+:::
+
 ## Why Tailwind?
 
 Tailwind lets you use utility classes instead of writing CSS. These utility classes are mostly one-to-one with a certain CSS property setting: for example, adding the `text-lg` to an element is equivalent to setting `font-size: 1.125rem` in CSS. You might find it easier to write and maintain your styles using these predefined utility classes!
@@ -82,45 +88,10 @@ export default defineConfig({
 });
 ```
 
-Then, create a `tailwind.config.mjs` file in your project's root directory. You can use the following command to generate a basic configuration file for you:
-
-<PackageManagerTabs>
-  <Fragment slot="npm">
-  ```sh
-  npx tailwindcss init
-  ```
-  </Fragment>
-  <Fragment slot="pnpm">
-  ```sh
-  pnpm dlx tailwindcss init
-  ```
-  </Fragment>
-  <Fragment slot="yarn">
-  ```sh
-  yarn dlx tailwindcss init
-  ```
-  </Fragment>
-</PackageManagerTabs>
-
-Finally, add this basic configuration to your `tailwind.config.mjs` file:
-
-```js ins={3} title="tailwind.config.mjs" "content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}']"
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
-```
-
 ## Usage
 
 When you install the integration, Tailwind's utility classes should be ready to go right away. Head to the [Tailwind docs](https://tailwindcss.com/docs/utility-first) to learn how to use Tailwind, and if you see a utility class you want to try, add it to any HTML element to your project!
 
-[Autoprefixer](https://github.com/postcss/autoprefixer) is also set up automatically when working in dev mode, and for production builds, so Tailwind classes will work in older browsers.
-
 ## Configuration
 
 ### Configuring Tailwind
@@ -135,9 +106,7 @@ The Astro Tailwind integration handles the communication between Astro and Tailw
 
 #### configFile
 
-Previously known as `config.path` in `@astrojs/tailwind` v3. See the [v4 changelog](https://github.com/withastro/astro/blob/main/packages/integrations/tailwind/CHANGELOG.md#400) for updating your config.
-
-If you want to use a different Tailwind configuration file instead of the default `tailwind.config.(js|cjs|mjs|ts|mts|cts)`, specify that file's location using this integration's `configFile` option. If `configFile` is relative, it will be resolved relative to the current working directory.
+If you want to use a different Tailwind configuration file instead of the default `tailwind.config.(js|cjs|mjs|ts|mts|cts)`, specify that file's location using this integration's `configFile` option. If `configFile` is relative, it will be resolved relative to the project root.
 
 :::caution
 Changing this isn't recommended since it can cause problems with other tools that integrate with Tailwind, like the official Tailwind VSCode extension.
@@ -160,15 +129,12 @@ export default defineConfig({
 
 #### applyBaseStyles
 
-Previously known as `config.applyBaseStyles` in `@astrojs/tailwind` v3. See the [v4 changelog](https://github.com/withastro/astro/blob/main/packages/integrations/tailwind/CHANGELOG.md#400) for updating your config.
-
 By default, the integration imports a basic `base.css` file on every page of your project. This basic CSS file includes the three main `@tailwind` directives:
 
 ```css title="base.css"
 /* The integration's default injected base.css file */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config '/path/computed/from/the/integration/config';
 ```
 
 To disable this default behavior, set `applyBaseStyles` to `false`. This can be useful if you need to define your own `base.css` file (to include a [`@layer` directive](https://tailwindcss.com/docs/functions-and-directives#layer), for example). This can also be useful if you do not want `base.css` to be imported on every page of your project.
@@ -191,26 +157,6 @@ export default defineConfig({
 
 You can now [import your own `base.css` as a local stylesheet](/en/guides/styling/#import-a-local-stylesheet).
 
-#### nesting
-
-Set `true` to apply the [`tailwindcss/nesting` PostCSS plugin](https://tailwindcss.com/docs/using-with-preprocessors#nesting) so you can write nested CSS declarations alongside Tailwind's syntax. This option is `false` by default.
-
-```js ins="nesting: true"
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import tailwind from '@astrojs/tailwind';
-
-export default defineConfig({
-  integrations: [
-    tailwind({
-      // Example: Allow writing nested CSS declarations
-      // alongside Tailwind's syntax
-      nesting: true,
-    }),
-  ],
-});
-```
-
 ## Examples
 
 * The [Astro Tailwind Starter](https://github.com/withastro/astro/tree/latest/examples/with-tailwindcss?on=github) gets you up and running with a base for your project that uses Tailwind for styling