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! 🎉 - If you want to know more about the custom token class names used in Spark, please check out our [**dedicated page**](https://sparkui.vercel.app/viewer/) where you can find a comprehensive list of these class names. -
+