diff --git a/documentation/using-spark/Setup.mdx b/documentation/using-spark/Setup.mdx
index 38be26273..5ae897c96 100644
--- a/documentation/using-spark/Setup.mdx
+++ b/documentation/using-spark/Setup.mdx
@@ -6,25 +6,21 @@ import { Callout } from '@docs/helpers/Callout'
# Setup
-## 1. Setup TailwindCSS
+## Prerequisites
-If you haven't installed **TailwindCSS** on your project yet, you **must** follow the [TailwindCSS installation guide](https://tailwindcss.com/docs/installation).
+**Spark UI** being based on **Tailwind CSS** library, you will need to [have it installed](https://tailwindcss.com/docs/installation) in your system.
-## 2. IntelliSense
+To take benefit of a full empowered developper experience (autocomplete, syntax highlighting, linting...), you should also take a look at [**Tailwind CSS IntelliSense**](https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code) extension. For now it comes actually only for VS Code but you also may be interested on equivalent solutions such as the ones provided [for JetBrains IDEs](https://www.jetbrains.com/help/webstorm/tailwind-css.html).
-The official Tailwind CSS [IntelliSense extension](https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code) for **Visual Studio Code** enhances the Tailwind development experience by providing users with advanced features such as autocomplete, syntax highlighting, and linting.
+## Spark setup
-**JetBrains IDEs** like WebStorm, PhpStorm, and others include [support](https://www.jetbrains.com/help/webstorm/tailwind-css.html) for intelligent Tailwind CSS completions in your HTML and when using @apply.
-
-## 3. Setup Spark
-
-After setting up **Tailwind** for your application, install the following packages via your command line:
+After completing the Tailwind CSS setup, you'll simply have to install the following packages via your command line:
```bash
npm i @spark-ui/tailwind-plugins @spark-ui/theme-utils
```
-Next, navigate to your **Tailwind config file**. Refer to the example below for proper configuration of our **Spark plugins**:
+Navigate to your `tailwind.config.js` file and refer to the example below for proper configuration of our **Spark plugins**:
```js
// tailwind.config.js
@@ -51,9 +47,9 @@ Two important notes regarding the example above:
- we are using our default themes from our `theme-utils` package. However, you can replace it with your own themes, as long as they adhere to our `Theme` interface.
The Theme interface is available through the [**@spark-ui/theme-utils**](?path=/docs/utils-theme--docs) package.
-- The `sparkConfig` plugin accepts an object with two fields: `themes` and `htmlFontSize`.
+- the `sparkConfig` plugin accepts an object with two fields:
-**themes**:
+**`themes`:**
An object containing your themes. Each key in the object will be extracted to a `[data-theme]` attribute, and the values will be converted to CSS custom properties inside the `css` file generated by Tailwing. **Note that this object requires a key with a value of default**, which specifies the default theme for your project.
@@ -81,7 +77,7 @@ Tailwind will generate the following CSS:
}
```
-**htmlFontSize (optional)**:
+**`htmlFontSize` (optional):**
Spark uses a base font size of **16 pixels** as a standard value for calculating the sizes of all other font-related properties defined in the theme. For example, our `spacing.lg` value is defined as **1rem**, which is equal to 16 pixels (based on the default base font size of 16 pixels).
@@ -113,15 +109,13 @@ module.exports = {
}
```
-That's all there is to it! 🎉
-