Update Tailwind Docs to Tailwind v4

src/routes/guides/styling-components/tailwind-v3.mdx

@@ -0,0 +1,133 @@
+---
+title: TailwindCSS v3
+order: 7
+mainNavExclude: true
+---
+
+[Tailwind CSS v3](https://v3.tailwindcss.com/) is an on-demand utility CSS library that integrates seamlessly with Solid as a built-in PostCSS plugin.
+
+## Installation
+
+1. Install Tailwind CSS as a development dependency:
+
+<TabsCodeBlocks>
+<div id="npm">
+```bash frame="none"
+npm i --save-dev tailwindcss@3 postcss autoprefixer
+```
+</div>
+
+<div id="yarn">
+```bash frame="none"
+yarn add --dev tailwindcss@3 postcss autoprefixer
+```
+</div>
+
+<div id="pnpm">
+```bash frame="none"
+pnpm add --save-dev tailwindcss@3 postcss autoprefixer
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bun add --save-dev tailwindcss@3 postcss autoprefixer
+```
+</div>
+</TabsCodeBlocks>
+
+2. Next, run the init command to generate both `tailwind.config.js` and `postcss.config.js`.
+
+<TabsCodeBlocks>
+<div id="npm">
+```bash frame="none"
+npx tailwindcss init -p
+```
+</div>
+
+<div id="yarn">
+```bash frame="none"
+yarn dlx tailwindcss init -p
+```
+</div>
+
+<div id="pnpm">
+```bash frame="none"
+pnpm dlx tailwindcss init -p
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bunx tailwindcss init -p
+```
+</div>
+</TabsCodeBlocks>
+
+3. Since TailwindCSS is configuration-driven, after initializing, a `tailwind.config.js` file will be created at the root of your project directory:
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};
+```
+
+For a deeper dive into configuration, you can check out the [Tailwind Official Documentation](https://tailwindcss.com/docs/configuration).
+
+## Add Tailwind directives
+
+In your `src/index.css` file, add the following Tailwind directives:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+These directives inform PostCSS that you're using Tailwind and establish the order of the directives. You can append custom CSS below these directives.
+
+## Import TailwindCSS
+
+Import your `index.css` file into the root `index.jsx` or `index.tsx` file:
+
+```jsx
+import { render } from "solid-js/web"
+import App from "./App"
+import "./index.css"
+
+render(() => <App />, document.getElementById('root') as HTMLElement);
+```
+
+## Usage
+
+With Tailwind CSS set up, you can now utilize its utility classes.
+For instance, if you previously had a `Card.css` file, you can replace or remove it:
+
+```
+/* src/components/Card.css */
+/* Remove or replace these styles with Tailwind utility classes */
+```
+
+Update your components to use Tailwind's utility classes:
+
+```jsx
+/* src/components/Card.jsx */
+function Card() {
+	return (
+		<div class="grid place-items-center min-h-screen">
+			<div class="h-[160px] aspect aspect-[2] rounded-[16px] shadow-[0_0_0_4px_hsl(0_0%_0%_/_15%)]">
+				Hello, world!
+			</div>
+		</div>
+	);
+}
+```
+
+## Support
+
+For additional assistance, refer to the [Tailwind CSS/Vite integration guide](https://tailwindcss.com/docs/guides/vite).

src/routes/guides/styling-components/tailwind.mdx

@@ -4,94 +4,71 @@ order: 5
 mainNavExclude: true
 ---
 
-[Tailwind CSS](https://tailwindcss.com/) is an on-demand utility CSS library that integrates seamlessly with Solid as a built-in PostCSS plugin.
+<Callout type="info" title="Note">
+
+This guide is for TailwindCSS v4. For **Tailwind CSS v3** refer to [TailwindCSS v3](/guides/styling-components/tailwind-v3).
+
+</Callout>
+
+[Tailwind CSS](https://tailwindcss.com/) is an on-demand utility CSS library that integrates seamlessly with Solid as a built-in PostCSS plugin. 
 
 ## Installation
 
 1. Install Tailwind CSS as a development dependency:
 
 <TabsCodeBlocks>
 <div id="npm">
-```bash frame="none"
-npm i --save-dev tailwindcss postcss autoprefixer
-```
-</div>
 
-<div id="yarn">
 ```bash frame="none"
-yarn add --dev tailwindcss postcss autoprefixer
+npm i --save-dev tailwindcss @tailwindcss/postcss postcss
 ```
-</div>
 
-<div id="pnpm">
-```bash frame="none"
-pnpm add --save-dev tailwindcss postcss autoprefixer
-```
 </div>
+<div id="yarn">
 
-<div id="bun">
 ```bash frame="none"
-bun add --save-dev tailwindcss postcss autoprefixer
+yarn add --dev tailwindcss @tailwindcss/postcss postcss
 ```
-</div>
-</TabsCodeBlocks>
 
-2. Next, run the init command to generate both `tailwind.config.js` and `postcss.config.js`.
-
-<TabsCodeBlocks>
-<div id="npm">
-```bash frame="none"
-npx tailwindcss init -p
-```
 </div>
+<div id="pnpm">
 
-<div id="yarn">
 ```bash frame="none"
-yarn dlx tailwindcss init -p
+pnpm add --save-dev tailwindcss @tailwindcss/postcss postcss
 ```
-</div>
 
-<div id="pnpm">
-```bash frame="none"
-pnpm dlx tailwindcss init -p
-```
 </div>
-
 <div id="bun">
+
 ```bash frame="none"
-bunx tailwindcss init -p
+bun add --save-dev tailwindcss @tailwindcss/postcss postcss
 ```
+
 </div>
 </TabsCodeBlocks>
 
-3. Since TailwindCSS is configuration-driven, after initializing, a `tailwind.config.js` file will be created at the root of your project directory:
-
-```js
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-};
+2. Add `@tailwind/postcss` to the `plugins` in your PostCSS configuration. If you do not have a PostCSS configuration file, create a new one called `postcss.config.mjs`.
+
+```js title="postcss.config.mjs"
+export default {
+	plugins: {
+		"@tailwindcss/postcss": {},
+	}
+}
 ```
 
 For a deeper dive into configuration, you can check out the [Tailwind Official Documentation](https://tailwindcss.com/docs/configuration).
 
-## Add Tailwind directives
+## Import TailwindCSS
 
-In your `src/index.css` file, add the following Tailwind directives:
+Add an `@import` to your `src/index.css` file that imports Tailwind CSS.
 
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+```css title="src/index.css"
+@import "tailwindcss";
 ```
 
-These directives inform PostCSS that you're using Tailwind and establish the order of the directives. You can append custom CSS below these directives.
 
-## Import TailwindCSS
+## Import your CSS file
 
 Import your `index.css` file into the root `index.jsx` or `index.tsx` file: