From 5b9e18fc63acce1b0e0a89d7b42ada824bff85bb Mon Sep 17 00:00:00 2001
From: Niaz Morshed Nayeem <nayeemxtreme@live.com>
Date: Thu, 6 Feb 2025 17:46:41 +0600
Subject: [PATCH 1/2] Update tailwind installation instruction to v4

---
 docs/01-app/01-getting-started/05-css.mdx | 41 +++++------------------
 1 file changed, 8 insertions(+), 33 deletions(-)

diff --git a/docs/01-app/01-getting-started/05-css.mdx b/docs/01-app/01-getting-started/05-css.mdx
index 49d470b0130e9..41eafd9f32b7f 100644
--- a/docs/01-app/01-getting-started/05-css.mdx
+++ b/docs/01-app/01-getting-started/05-css.mdx
@@ -103,45 +103,22 @@ export default function RootLayout({ children }) {
 
 ### Installing Tailwind
 
-To start using Tailwind, install the Tailwind CSS packages and run the `init` command to generate both the `tailwind.config.js` and `postcss.config.js` files:
+To start using Tailwind, install the necessary Tailwind CSS packages:
 
 ```bash filename="Terminal"
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
+npm install -D tailwindcss @tailwindcss/postcss postcss
 ```
 
 ### Configuring Tailwind
 
-Inside your Tailwind configuration file, add paths to the files that will use the Tailwind class names:
+Add `@tailwindcss/postcss` to the `postcss.config.mjs` file:
 
-```ts filename="tailwind.config.ts" highlight={5-7} switcher
-import type { Config } from 'tailwindcss'
-
-export default {
-  content: [
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    // Or if using `src` directory:
-    './src/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-} satisfies Config
-```
-
-```js filename="tailwind.config.js" highlight={4-6} switcher
+```js filename="postcss.config.mjs" highlight={4}
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    // Or if using `src` directory:
-    './src/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  theme: {
-    extend: {},
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
   },
-  plugins: [],
 }
 ```
 
@@ -150,9 +127,7 @@ module.exports = {
 Add the [Tailwind directives](https://tailwindcss.com/docs/functions-and-directives#directives) to your [Global Stylesheet](#global-css):
 
 ```css filename="app/globals.css"
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 ```
 
 Then, import the styles in the [root layout](/docs/app/api-reference/file-conventions/layout#root-layouts):

From b4d36011b7f0ff3f3b656ad8f5b3d6c0b2bd2707 Mon Sep 17 00:00:00 2001
From: Niaz Morshed Nayeem <nayeemxtreme@live.com>
Date: Wed, 12 Feb 2025 16:45:31 +0600
Subject: [PATCH 2/2] Update Tailwind CSS setup instructions for PostCSS
 configuration

---
 docs/01-app/01-getting-started/05-css.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/01-app/01-getting-started/05-css.mdx b/docs/01-app/01-getting-started/05-css.mdx
index 41eafd9f32b7f..73d693ec02fe5 100644
--- a/docs/01-app/01-getting-started/05-css.mdx
+++ b/docs/01-app/01-getting-started/05-css.mdx
@@ -111,7 +111,7 @@ npm install -D tailwindcss @tailwindcss/postcss postcss
 
 ### Configuring Tailwind
 
-Add `@tailwindcss/postcss` to the `postcss.config.mjs` file:
+Create a `postcss.config.mjs` file in the root of your project and add the `@tailwindcss/postcss` plugin to your PostCSS configuration:
 
 ```js filename="postcss.config.mjs" highlight={4}
 /** @type {import('tailwindcss').Config} */