Readme updated - Added example

Author: Florian Torres

README.md

@@ -4,9 +4,128 @@
 [Supernova](https://supernova.io) is a design system platform that allows you to seamlessly translate your design system data to production-ready code. Supernova works with any platform or tech stack, is used by many developers and organizations around the world, and can help you save time by replacing manual and repetitive tasks that all developers hate. To learn everything Supernova, please check out our [developer documentation](https://developers.supernova.io/).
 
 
-# CSS Exporter
+# Tailwind Exporter
 
 
+This Tailwind exporter is an extension to the CSS exporter. It generates an additional file, `tailwind-variables.js` that contains the css variables as a `js` object, in order to import them directly into your **Tailwind config**.
+
+## How to import your variables into your Tailwind config - Example :
+
+Here is a project architecture example :
+
+```bash
+# Project architecture example
+
+app
+├── styles
+│   └── designsystem # Output folder of the exporter
+│       ├── colors.css
+│       ├── # Other
+│       ├── # css
+│       ├── # files...
+│       └── tailwind-variables.js
+└── tailwind.config.js
+```
+
+The idea is to import `tailwind-variables.js` in `tailwind.config.js`
+
+```css
+/* File: styles/designsystem/colors.css */
+/* This file is automatically generated by the tailwind exporter */
+
+:root {  
+    --color-primary-dark2: #1c7a44;
+    --color-primary-dark1: #25a35a;
+    --color-primary-main: #2ecc71;
+    --color-primary-light1: #6ddb9c;
+    --color-primary-light2: #abebc6;
+    --color-primary-light3: #d5f5e3;
+    --color-primary-border: #29b866;
+    --color-secondary-dark2: #0e4290;
+    --color-secondary-dark1: #1358c0;
+    --color-secondary-main: #186ef0;
+    --color-secondary-light1: #5d9af5;
+    --color-secondary-light2: #a3c5f9;
+    --color-secondary-light3: #d1e2fc;
+    --color-secondary-border: #1663d8;
+}
+```
+
+```js
+// styles/designsystem/tailwind-variables.js
+// This file is automatically generated by the tailwind exporter
+
+module.exports = {
+    'colors': {
+        'primary': {
+            'dark2': 'var(--color-primary-dark2)', 
+            'dark1': 'var(--color-primary-dark1)', 
+            'DEFAULT': 'var(--color-primary-main)', 
+            'light1': 'var(--color-primary-light1)', 
+            'light2': 'var(--color-primary-light2)', 
+            'light3': 'var(--color-primary-light3)', 
+            'border': 'var(--color-primary-border)', 
+        },
+        'secondary': {
+            'border': 'var(--color-secondary-border)', 
+            'dark2': 'var(--color-secondary-dark2)', 
+            'dark1': 'var(--color-secondary-dark1)', 
+            'DEFAULT': 'var(--color-secondary-main)', 
+            'light1': 'var(--color-secondary-light1)', 
+            'light2': 'var(--color-secondary-light2)', 
+            'light3': 'var(--color-secondary-light3)', 
+        },
+    }
+}
+```
+
+```js
+// tailwind.config.js
+
+const designSystemVariables = require('./styles/designsystem/tailwind-variables'); // Add this line
+
+module.exports = {
+    purge: [],
+    darkMode: false,
+    theme: {
+        extend: designSystemVariables, // Add this line
+    },
+    variants: {
+        extend: {},
+    },
+    plugins: [],
+}
+```
+
+Eventually, you can use the **Tailwind variables** in your templates :
+
+```html
+<section class="container mx-auto mt-24">
+
+    <h1 class="text-2xl text-primary">Supernova x Tailwind exporter x Tailwind</h1>
+    <p class="text-secondary mt-2">Tailwind setup</p>
+    <ul class="flex mt-2 text-white">
+        <li class="p-2 mr-3 rounded bg-primary-dark2">Dark 2</li>
+        <li class="p-2 mr-3 rounded bg-primary-dark1">Dark 1</li>
+        <li class="p-2 mr-3 rounded bg-primary">Main</li>
+        <li class="p-2 mr-3 rounded bg-primary-light1">Light 1</li>
+        <li class="p-2 mr-3 rounded bg-primary-light2">Light 2</li>
+        <li class="p-2 mr-3 rounded bg-primary-light3">Light 3</li>
+    </ul>
+
+</section>
+```
+
+Tokens supported for tailwind exporter :
+
+- [x] Color definitions
+- [ ] Text Styles
+- [ ] Gradients
+- [ ] Shadows
+- [ ] Borders
+- [ ] Radii
+- [ ] Measures
+
 The CSS allows you to **produce a CSS definitions** in such a way that it can be immediately used in your production codebase to style all your visual elements. Specifically, this exporter is capable of exporting the previews of:
 
 - [x] Color definitions