Merge branch 'main' into improve-session-docs

Author: LadyBluenotes

src/routes/guides/complex-state-management.mdx

@@ -13,7 +13,7 @@ import { For, createSignal, Show, createMemo } from "solid-js"
 const App = () => {
 	const [tasks, setTasks] = createSignal([])
 	const [numberOfTasks, setNumberOfTasks] = createSignal(tasks.length)
-        const completedTasks = createMemo(() => tasks().filter((task) => task.completed))
+	const completedTasks = createMemo(() => tasks().filter((task) => task.completed))
 	let input
 
 	const addTask = (text) => {

src/routes/guides/routing-and-navigation.mdx

@@ -493,7 +493,7 @@ This means you can initialize the page, or use [Data APIs](/solid-router/referen
 
 <Callout>
 	To prevent a fetch from happening more than once, or to trigger a refetch, you
-	can use the [`cache` function](/solid-router/reference/data-apis/cache).
+	can use the [`query` function](/solid-router/reference/data-apis/query).
 </Callout>
 
 ```jsx title="index.jsx"

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:
 

src/routes/solid-router/getting-started/config.mdx

@@ -2,7 +2,8 @@
 title: "Config-based routing"
 ---
 
-Solid Router allows for configuration-based routing, where JSX is not needed to set up routes. 
+Solid Router supports config-based routing, which offers the same capabilities as [component routing](/solid-router/getting-started/component).
+The decision to use config-based routing over component routing depends largely on personal preference.
 
 To define a single route, a route definition object can be passed to the [`<Router>`](/solid-router/reference/components/router) component:
 

src/routes/solid-router/reference/components/a.mdx

@@ -2,7 +2,8 @@
 title: A
 ---
 
-Solid Router exposes an `<A />` component as a wrapper around the native [`<a />`](https://mdn.io/a) tag.
+Solid Router exposes the `<A />` component as a wrapper around the [native anchor tag ](https://mdn.io/a).
+It relies on the routing context provided by the [`<Router>` component](/solid-router/reference/components/router) and if used outside, will triggers a runtime error..
 
 `<A />` supports relative and base paths. `<a />` doesn't. But `<a />` gets augmented
 when JS is present via a top-level listener to the DOM, so you get the

src/routes/solid-router/reference/data-apis/create-async.mdx

@@ -7,7 +7,7 @@ An asynchronous primitive with a function that tracks similar to `createMemo`.
 Reading it before it is ready causes Suspense/Transitions to trigger.
 
 <Callout type="caution">
-	Using `cache` in `createResource` directly will not work since the fetcher is
+	Using `query` in `createResource` directly will not work since the fetcher is
 	not reactive. This means that it will not invalidate properly.
 </Callout>
 
@@ -17,7 +17,7 @@ It is recommended that `createAsync` be used in favor of `createResource` specia
 
 
 ```tsx title="component.tsx" {6,10}
-import { createAsync } from "solid/router";
+import { createAsync } from "@solidjs/router";
 import { Suspense } from "solid-js";
 import { getUser } from "./api";
 

src/routes/solid-router/reference/data-apis/query.mdx

@@ -85,7 +85,7 @@ For instance, both `{ name: 'Ryan', awesome: true }` and `{ awesome: true, name:
 
 ## Return value
 
-The return value is a `CachedFunction`, a function that has the same signature as the function you passed to `cache`.
+The return value is a `CachedFunction`, a function that has the same signature as the function you passed to `query`.
 This cached function stores the return value using the cache key.
 Under most circumstances, this temporarily prevents the passed function from running with the same arguments, even if the created function is called repeatedly.
 

src/routes/solid-router/reference/primitives/use-resolved-path.mdx

@@ -0,0 +1,37 @@
+---
+title: useResolvedPath
+---
+
+`useResolvedPath` retrieves a signal\<string\>.
+It contains the current resolved path as defined in the Route.
+
+```js
+const path = useResolvedPath(() => '');
+
+// Parent Route path: /user/* 
+console.log(path()); // /user
+
+const path = useResolvedPath(() => 'a/b/c');
+
+// Parent Route path: /user/* 
+console.log(path()); // /user/a/b/c
+
+const path = useResolvedPath(() => '/a/b/c'); // Note: /
+
+// Parent Route path: /user/* 
+console.log(path()); // a/b/c
+```
+
+Useful for making modular routers
+
+```js
+const parentRoutePath = useResolvedPath(() => '');
+
+return <>
+        <h1>Module component layer</h1>
+        <Router base={parentRoutePath()}> // Modular magic
+            <Route path="/" component={() => <div>Index</div>}/>
+            <Route path="/a" component={() => <div>AComponent</div>}/>
+        </Router>
+</>
+```