Docs/spell-error-and-commands (#3219)

skeletonlabs · Feb 13, 2025 · 9eb7881 · 9eb7881
1 parent 06d3ec1
commit 9eb7881
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 9 deletions.
diff --git a/packages/skeleton-react/src/lib/components/Segment/Segment.test.tsx b/packages/skeleton-react/src/lib/components/Segment/Segment.test.tsx
@@ -16,7 +16,7 @@ describe('<Segment>', () => {
 		expect(component).toBeInTheDocument();
 	});
 
-	it('should allow you to pass arbitrary classses', () => {
+	it('should allow you to pass arbitrary classes', () => {
 		const testClasses = 'bg-green-500';
 		const { getByTestId } = render(
 			<Segment name="align" value="0" classes={testClasses}>

diff --git a/sites/next.skeleton.dev/src/content/docs/get-started/fundamentals.mdx b/sites/next.skeleton.dev/src/content/docs/get-started/fundamentals.mdx
@@ -22,7 +22,7 @@ A fully featured [Figma UI Kit](/docs/get-started/figma) is available to designe
 
 ### Iconography
 
-Skeleton is icon agnostic, meaning you may bring your own iconography solution. However, all code examples in this documentation website default to [Lucide](https://lucide.dev/). See our integration guides for [React](/docs/integrations/iconography/react) or [Svelte](/docs/integrations/iconography/react) if you wish to follow our lead.
+Skeleton is icon agnostic, meaning you may bring your own iconography solution. However, all code examples in this documentation website default to [Lucide](https://lucide.dev/). See our integration guides for [React](/docs/integrations/iconography/react) or [Svelte](/docs/integrations/iconography/svelte) if you wish to follow our lead.
 
 ### Systems
 
@@ -55,7 +55,7 @@ Skeleton's components utilize [Zag.js](https://zagjs.com/) as their foundation,
 
 ### Importing Component
 
-Import the component you wish to use fom your framework package of choice, then insert it into your page template.
+Import the component you wish to use from your framework package of choice, then insert it into your page template.
 
 ```ts
 import { Avatar } from '@skeletonlabs/skeleton-{framework}';
@@ -112,7 +112,7 @@ We can use the `background` style prop to replace the default background color.
 <Avatar background="bg-blue-500">Sk</Avatar>
 ```
 
-Since the component doesn't have a dedicated `border` prop, we can extend our class list using `classses`.
+Since the component doesn't have a dedicated `border` prop, we can extend our class list using `classes`.
 
 ```ts
 <Avatar classes="border-4 border-green-500">Sk</Avatar>

diff --git a/sites/next.skeleton.dev/src/content/docs/get-started/installation.mdx b/sites/next.skeleton.dev/src/content/docs/get-started/installation.mdx
@@ -15,7 +15,7 @@ import NavGrid from '@components/docs/NavGrid.astro';
 
 ## Mixing UI Libraries
 
-Skeleton's design system is perfect for complimenting headless component libraries, such as [Melt UI](https://www.melt-ui.com/), [Radix](https://www.radix-ui.com/), and [Zag.js](https://zagjs.com/). As well as "Tailwind component" libraries such as the [Tailwind UI](https://tailwindui.com/). Supporting any component system that supports Tailwind, but very specifically allows you to insert or substitute Skeleton-provided utility classes.
+Skeleton's design system is perfect for complementing headless component libraries, such as [Melt UI](https://www.melt-ui.com/), [Radix](https://www.radix-ui.com/), and [Zag.js](https://zagjs.com/). As well as "Tailwind component" libraries such as the [Tailwind UI](https://tailwindui.com/). Supporting any component system that supports Tailwind, but very specifically allows you to insert or substitute Skeleton-provided utility classes.
 
 ### Unsupported Libraries
 

diff --git a/sites/next.skeleton.dev/src/content/docs/get-started/installation/vite-react.mdx b/sites/next.skeleton.dev/src/content/docs/get-started/installation/vite-react.mdx
@@ -43,12 +43,13 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
         npm i -D @skeletonlabs/skeleton@next @skeletonlabs/skeleton-react@next
         ```
     </ProcessStep>
+    {/* TODO: remove @3.4.17 when tailwind 4 support came out */}
     <ProcessStep step="3">
          ### Install Tailwind
         Install Tailwind and its dependencies.
         ```console
         npm install -D tailwindcss postcss autoprefixer
-        npx tailwindcss init -p
+        npx tailwindcss@3.4.17 init -p
         ```
     </ProcessStep>
     <ProcessStep step="4">

diff --git a/sites/next.skeleton.dev/src/content/docs/get-started/installation/vite-svelte.mdx b/sites/next.skeleton.dev/src/content/docs/get-started/installation/vite-svelte.mdx
@@ -43,12 +43,13 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
         npm i -D @skeletonlabs/skeleton@next @skeletonlabs/skeleton-svelte@next
         ```
     </ProcessStep>
+    {/* TODO: remove @3.4.17 when tailwind 4 support came out */}
     <ProcessStep step="3">
          ### Install Tailwind
         Install Tailwind and its dependencies.
         ```console
         npm install -D tailwindcss postcss autoprefixer
-        npx tailwindcss init -p
+        npx tailwindcss@3.4.17 init -p
         ```
     </ProcessStep>
     <ProcessStep step="4">

diff --git a/sites/next.skeleton.dev/src/content/docs/guides/layouts.mdx b/sites/next.skeleton.dev/src/content/docs/guides/layouts.mdx
@@ -65,7 +65,7 @@ Learn more about [CSS grid](https://css-tricks.com/snippets/css/complete-guide-g
 | Utility | Description |
 | --- | --- |
 | [Columns](https://tailwindcss.com/docs/grid-template-columns) | Utilities for specifying the columns in a grid layout. |
-| [Colum Start/End](https://tailwindcss.com/docs/grid-column) | Utilities for controlling how elements are sized and placed across grid columns. |
+| [Column Start/End](https://tailwindcss.com/docs/grid-column) | Utilities for controlling how elements are sized and placed across grid columns. |
 | [Rows](https://tailwindcss.com/docs/grid-template-rows) | Utilities for specifying the rows in a grid layout. |
 | [Row Start/End](https://tailwindcss.com/docs/grid-row) | Utilities for controlling how elements are sized and placed across grid rows. |
 | [Auto Flow](https://tailwindcss.com/docs/grid-auto-flow) | Utilities for controlling how elements in a grid are auto-placed. |

diff --git a/sites/next.skeleton.dev/src/content/docs/integrations/toasts/react.mdx b/sites/next.skeleton.dev/src/content/docs/integrations/toasts/react.mdx
@@ -7,7 +7,7 @@ export const components = componentSet;
 import { Page as Example } from '@examples/integrations/toasts/Example.tsx';
 import ExampleRaw from '@examples/integrations/toasts/Example.tsx?raw';
 
-<p class="type-scale-5">[React-Hot-Toast](https://react-hot-toast.com/) provides a simple all-in-one solution for Toast notification. Custom toast templates can be implemented as using either JSX or React components, making it trivial to implement Skeleton and Tailwind utility classses.</p>
+<p class="type-scale-5">[React-Hot-Toast](https://react-hot-toast.com/) provides a simple all-in-one solution for Toast notification. Custom toast templates can be implemented as using either JSX or React components, making it trivial to implement Skeleton and Tailwind utility classes.</p>
 
 <figure class="card-filled-enhanced flex justify-center gap-4 p-8">
 	<a href="https://react-hot-toast.com/docs" target="_blank" class="btn preset-filled">