small retouches

packages/core/README.md

@@ -4,9 +4,9 @@
 
 With @svelte-fui/core at your disposal, developers can effortlessly design beautiful, responsive layouts that captivate users and elevate their web experiences to new heights.
 
-# Installation
+# Usage
 
-First install fluent ui for svelte:
+To begin, install the `@svelte-fui/core` package into your project.
 
 ```shell
 // pnpm
@@ -16,19 +16,22 @@ pnpm install @svelte-fui/core
 npm install @svelte-fui/core
 ```
 
-# Usage
+To build UIs using `@svelte-fui/core` components, it is necessary to place the `App` component at the highest level of your application or route (in the case of Sveltekit). Import the UI component and include the theme as children of the `App` component. 
+
 
 ```html
 <script>
 	import { App, Button } from '@svelte-fui/core';
 </script>
 
 <App>
-	<button>Hello World!</button>
+	<Button>Hello World!</Button>
 </App>
 ```
 
-You can easily integrate the `fuiPreset` export by `@svelte-ui/tailwindcss` into your tailwind configuration if you're a TailwindCSS enthusiast and want to incorporate Fluent UI tokens into your app for creating custom components that align with the Fluent Design system. Simply follow the instructions listed below.
+**Note: For TailwindCSS users :point_down:**
+
+If you're a TailwindCSS enthusiast and want to incorporate Fluent UI tokens into your app for creating custom components that align with the Fluent Design system, You can easily integrate the `fuiPreset` export by `@svelte-ui/tailwindcss` into your tailwindcss configuration. Simply follow the instructions listed below.
 
 
 First, let's make sure the package is installed.

packages/tailwindcss/README.md

@@ -35,7 +35,7 @@ export default {
 </script>
 
 <App>
-    <div class="text-neutral-foreground-1 text-base-400" >This a simple label</div>
+	<div class="text-neutral-foreground-1 text-base-400" >This a simple label</div>
 	<Button>Hello World!</Button>
 </App>
 ```