Supernova-Studio · Aug 5, 2021 · Aug 5, 2021 · Aug 5, 2021 · Aug 5, 2021 · Aug 6, 2021
diff --git a/README.md b/README.md
@@ -1,49 +1,137 @@
-<img src="https://github.com/Supernova-Studio/exporter-css/blob/master/readme-icon.png?raw=true" alt="Supernova Logo" style="max-width:100%;">
+<img src="https://github.com/torresf/exporter-tailwind/blob/master/readme-icon.png?raw=true" alt="Supernova Logo" style="max-width:100%;">
 
 [Supernova](https://supernova.io) is a design system platform that manages your assets, tokens, components and allows you to write spectacular documentations for your entire teams. And because you found your way here, you are probably interested in its most advanced functionality - automatic hand-off of design and development assets, tokens and data in general. To learn everything Supernova, please check out our [developer documentation](https://developers.supernova.io/).
 
 
-# CSS Exporter
+# Tailwind Exporter
 
-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
-- [x] Text Styles
-- [x] Gradients
-- [x] Shadows
-- [x] Borders
-- [x] Radii
-- [x] Measures
+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**.
 
-You can generate all production ready-code either manually using Supernova's [VS Code extension](https://marketplace.visualstudio.com/items?itemName=SupernovaIO.pulsar-vsc-extension), or automate your code delivery pipeline using Supernova [Design Continuous Delivery](https://supernova.io/automated-code-delivery).
+## How to import your variables into your Tailwind config - Example :
 
+Here is a project architecture example :
 
-## Example Usage
-
-Once you have run the exporter against your design system, you can start using the code in your codebase right away. To use the output of the exporter, simply add the stylesheets to your html page, like this:
+```bash
+# Project architecture example
 
+app
+├── styles
+│   └── designsystem # Output folder of the exporter
+│       ├── colors.css
+│       ├── # Other
+│       ├── # css
+│       ├── # files...
+│       └── tailwind-variables.js
+└── tailwind.config.js
 ```
-<!DOCTYPE html>
-<html>
- <head>
-  <meta charset="utf-8">
-  <title>Style import test</title>
-  <style>
-    @import ".build/index.css";
-  </style>
- </head>
-</html>
+
+The idea is to import `tailwind-variables.js` in `tailwind.config.js`
+
+```css
+/* app/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;
+}
 ```
 
-Because tokens are defined as css variables, you can use them as such, anywhere you need that value (even in order definitions):
+```js
+// app/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
+// app/tailwind.config.js
+
+const designSystemVariables = require('./styles/designsystem/tailwind-variables'); // Add this line
+
+module.exports = {
+    purge: [],
+    darkMode: false,
+    theme: {
+        extend: designSystemVariables, // Add this line to extend tailwind theme with your design system
+    },
+    variants: {
+        extend: {},
+    },
+    plugins: [],
+}
 ```
-<p style="color: var(--colorContrast)">...</p>
+
+That's it ! You can now 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">Importing your design system</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>
 ```
 
+<img src="./result-example.png" alt="Result example" style="width:600px;max-width:100%;">
+
+Tokens supported by Tailwind exporter :
+
+- [x] Color definitions
+- [ ] Text Styles
+- [ ] Gradients
+- [x] Shadows
+- [ ] Borders
+- [ ] Radii
+- [ ] Measures
+
+You can generate all production ready-code either manually using Supernova's [VS Code extension](https://marketplace.visualstudio.com/items?itemName=SupernovaIO.pulsar-vsc-extension), or automate your code delivery pipeline using Supernova [Design Continuous Delivery](https://supernova.io/automated-code-delivery).
+
 ## Installing
 
-In order to make the Supernova CSS exporter available for your organization so you can start generating code from your design system, please follow the installation guide in our [developer documentation](https://developers.supernova.io/using-exporters/installing-exporters).
+In order to make the Supernova Tailwind exporter available for your organization so you can start generating code from your design system, please follow the installation guide in our [developer documentation](https://developers.supernova.io/using-exporters/installing-exporters).
 
 
 ## Reporting Bugs or Requesting Features

diff --git a/exporter.json b/exporter.json
@@ -1,25 +1,21 @@
 {
-    "id": "io.supernova.css",
-    "name": "CSS",
-    "description": "CSS token and style exporter",
-    "author": "Ivan Terpugov & Jiri Trecak",
-    "organization": "Supernova",
-    "homepage": "https://supernova.io",
-    "source_dir": "src",
-    "version": "1.3.0",
-    "usesBrands": true,
-    "config": {
-        "sources": "sources.json",
-        "output": "output.json",
-        "js": "src/js/helpers.js"
-    },
-    "engines": {
-        "pulsar": "1.0.0",
-        "supernova": "1.0.0"
-    },
-    "tags": [
-        "CSS",
-        "Tokens",
-        "Styles"
-    ]
-}
+  "id": "io.supernova.tailwind",
+  "name": "Tailwind",
+  "description": "Tailwind CSS exporter",
+  "author": "Florian Torres & Ivan Terpugov & Jiri Trecak",
+  "organization": "Ascanio",
+  "homepage": "https://ascan.io",
+  "source_dir": "src",
+  "version": "1.7.1",
+  "usesBrands": true,
+  "config": {
+    "sources": "sources.json",
+    "output": "output.json",
+    "js": "src/js/helpers.js"
+  },
+  "engines": {
+    "pulsar": "1.0.0",
+    "supernova": "1.0.0"
+  },
+  "tags": ["TailwindCSS", "Tokens", "Styles"]
+}
diff --git a/icon.png b/icon.png
diff --git a/output.json b/output.json
@@ -27,6 +27,10 @@
         {
             "invoke": "index-file.pr",
             "write_to": "index.css"
+        },
+        {
+            "invoke": "tailwind-variables.pr",
+            "write_to": "tailwind-variables.js"
         }
     ]
 }
diff --git a/readme-icon.png b/readme-icon.png
diff --git a/result-example.png b/result-example.png
diff --git a/src/colors.pr b/src/colors.pr
@@ -9,7 +9,7 @@ and their value rendered using `rendered-color` blueprint
 {[ let brand = ds.currentBrand() /]}
 {[ for token in ds.tokensByType("Color", brand.id) ]}
     {[ inject "rendered-token-var" context token /]}
-    
+
 
 {[/]}
 }
diff --git a/src/js/helpers.js b/src/js/helpers.js
@@ -1 +1,181 @@
-!function(e){var r={};function n(t){if(r[t])return r[t].exports;var o=r[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=r,n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,r){if(1&r&&(e=n(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(n.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)n.d(t,o,function(r){return e[r]}.bind(null,o));return t},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},n.p="",n(n.s=0)}([function(e,r){function n(e){var r,n=t((r=e.value.radius.measure)<=0?0:r),o=t(e.value.x.measure),a=t(e.value.y.measure),u=t(e.value.spread.measure);return`${"Inner"===e.value.type?"inset ":""}${o} ${a} ${n} ${u} ${function(e){if(0===e.a)return`rgb(${e.r},${e.g},${e.b})`;{const r=Math.round(e.a/255*100)/100;return`rgba(${e.r},${e.g},${e.b},${r})`}}(e.value.color)}`}function t(e){return 0===e?""+e:e+"px"}Pulsar.registerFunction("readableVariableName",(function(e,r,n){const t=[...r.path];r.isRoot||t.push(r.name),t.push(e.name),n&&n.length>0&&t.unshift(n);let o=t.join(" ");return o=o.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g,(e,r)=>r.toUpperCase()),o=o.replace(/[^a-zA-Z0-9_-]/g,"_"),/^\d/.test(o)&&(o="_"+o),o})),Pulsar.registerFunction("findAliases",(function e(r,n){let t=n.filter(e=>e.value.referencedToken&&e.value.referencedToken.id===r.id);for(const r of t)t=t.concat(e(r,n));return t})),Pulsar.registerFunction("gradientAngle",(function(e,r){var n=r.y-e.y,t=r.x-e.x,o=180*Math.atan2(n,t)/Math.PI;return((o+=90)<0?360+o:o)%360})),Pulsar.registerPayload("behavior",{colorTokenPrefix:"color",borderTokenPrefix:"border",gradientTokenPrefix:"gradient",measureTokenPrefix:"measure",shadowTokenPrefix:"shadow",typographyTokenPrefix:"typography"}),Pulsar.registerFunction("shadowDescription",(function(e){let r="transparent";return e.shadowLayers?(r=e.shadowLayers.reverse().map(e=>n(e)).join(", "),null!=r?r:""):n(e)}))}]);
+/**
+ * Convert group name, token name and possible prefix into kebab-case string, joining everything together
+ */
+Pulsar.registerFunction(
+  "readableVariableName",
+  function (token, tokenGroup, prefix) {
+    // Create array with all path segments and token name at the end
+    const segments = [...tokenGroup.path];
+    if (!tokenGroup.isRoot) {
+      segments.push(tokenGroup.name);
+    }
+    segments.push(token.name);
+
+    if (prefix && prefix.length > 0) {
+      segments.unshift(prefix);
+    }
+
+    // Create "sentence" separated by spaces so we can camelcase it all
+    return cleanSentence(segments.join(" "), true);
+  }
+);
+
+Pulsar.registerFunction("readableGroupName", function (tokenGroup) {
+  // Create array with all path segments and token name at the end
+  const segments = [...tokenGroup.path];
+  if (!tokenGroup.isRoot) {
+    segments.push(tokenGroup.name);
+  }
+
+  // Create "sentence" separated by spaces so we can camelcase it all
+  return cleanSentence(segments.join(" "), false);
+});
+
+Pulsar.registerFunction("cleanString", function (name) {
+  return cleanSentence(name, false);
+});
+
+function cleanSentence(sentence, handleStartingDigits) {
+  sentence = sentence
+    .toLowerCase()
+    .replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => "-" + chr);
+
+  // only allow letters, digits, underscore and hyphen
+  sentence = sentence.replace(/[^a-zA-Z0-9_-]/g, "_");
+
+  // prepend underscore if it starts with digit
+  if (/^\d/.test(sentence) && handleStartingDigits) {
+    sentence = "_" + sentence;
+  }
+
+  return sentence;
+}
+
+function getGroupNameFromOriginName(originName) {
+  return originName.substr(0, originName.indexOf("/")).trim().toLowerCase();
+}
+
+function getGroups(allTokens) {
+  let allGroups = allTokens.map((token) =>
+    getGroupNameFromOriginName(token.origin.name)
+  );
+  let uniqueGroups = [...new Set(allGroups)];
+  return uniqueGroups;
+}
+
+Pulsar.registerFunction("getGroups", getGroups);
+
+function getTokensByGroup(allTokens, group) {
+  return allTokens.filter((token) =>
+    token.origin.name.substr(
+      0,
+      getGroupNameFromOriginName(token.origin.name) === group
+    )
+  );
+}
+
+Pulsar.registerFunction("getTokensByGroup", getTokensByGroup);
+
+function findAliases(token, allTokens) {
+  let aliases = allTokens.filter(
+    (t) => t.value.referencedToken && t.value.referencedToken.id === token.id
+  );
+  for (const t of aliases) {
+    aliases = aliases.concat(findAliases(t, allTokens));
+  }
+  return aliases;
+}
+
+Pulsar.registerFunction("findAliases", findAliases);
+
+Pulsar.registerFunction("gradientAngle", function (from, to) {
+  var deltaY = to.y - from.y;
+  var deltaX = to.x - from.x;
+  var radians = Math.atan2(deltaY, deltaX);
+  var result = (radians * 180) / Math.PI;
+  result = result + 90;
+  return (result < 0 ? 360 + result : result) % 360;
+});
+
+/**
+ * Behavior configuration of the exporter
+ * Prefixes: Add prefix for each category of the tokens. For example, all colors can start with "color, if needed"
+ */
+Pulsar.registerPayload("behavior", {
+  colorTokenPrefix: "color",
+  borderTokenPrefix: "border",
+  gradientTokenPrefix: "gradient",
+  measureTokenPrefix: "measure",
+  shadowTokenPrefix: "shadow",
+  typographyTokenPrefix: "typography",
+});
+
+/** Describe complex shadow token */
+Pulsar.registerFunction("shadowDescription", function (shadowToken) {
+  let connectedShadow = shadowToken.shadowLayers
+    ?.reverse()
+    .map((shadow) => {
+      return shadowTokenValue(shadow);
+    })
+    .join(", ");
+
+  return connectedShadow;
+});
+
+/** Convert complex shadow value to CSS representation */
+function shadowTokenValue(shadowToken) {
+  var blurRadius = getValueWithCorrectUnit(
+    nonNegativeValue(shadowToken.value.radius.measure)
+  );
+  var offsetX = getValueWithCorrectUnit(shadowToken.value.x.measure);
+  var offsetY = getValueWithCorrectUnit(shadowToken.value.y.measure);
+  var spreadRadius = getValueWithCorrectUnit(shadowToken.value.spread.measure);
+
+  return `${
+    shadowToken.value.type === "Inner" ? "inset " : ""
+  }${offsetX} ${offsetY} ${blurRadius} ${spreadRadius} ${getFormattedRGB(
+    shadowToken.value.color
+  )}`;
+}
+
+function getValueWithCorrectUnit(value, unit, forceUnit) {
+  if (value === 0 && forceUnit !== true) {
+    return `${value}`;
+  } else {
+    // todo: add support for other units (px, rem, em, etc.)
+    return `${value}px`;
+  }
+}
+
+function nonNegativeValue(num) {
+  if (num <= 0) {
+    return 0;
+  } else {
+    return num;
+  }
+}
+
+/** Convert type to CSS unit */
+function measureTypeIntoReadableUnit(type) {
+  switch (type) {
+    case "Points":
+      return "pt";
+    case "Pixels":
+      return "px";
+    case "Percent":
+      return "%";
+    case "Ems":
+      return "em";
+    case "Rem":
+      return "rem";
+  }
+}
+
+function getFormattedRGB(colorValue) {
+  if (colorValue.a === 0) {
+    return `rgb(${colorValue.r},${colorValue.g},${colorValue.b})`;
+  } else {
+    const opacity = Math.round((colorValue.a / 255) * 100) / 100;
+    return `rgba(${colorValue.r},${colorValue.g},${colorValue.b},${opacity})`;
+  }
+}
diff --git a/src/main-renderers/reference-wrapper.pr b/src/main-renderers/reference-wrapper.pr
@@ -21,4 +21,5 @@ Note: Token is passed as `context` property because it is injected
 {[ if !context.referencedToken ]}
 {{ #body }}
 {[ else ]}
-var(--{[ inject "rendered-name" context context.referencedToken /]}){[/]}
+{{ #body }}
+{[/]}
diff --git a/src/main-renderers/rendered-description.pr b/src/main-renderers/rendered-description.pr
@@ -20,6 +20,4 @@ Rendered as:
 
 /* description */
 *}
-{[ if (context.description && context.description.count() > 0) ]}
-/* {{ context.description.replacing("*/", "* /") }} */
-{[/]}
+{[ if (context.description && context.description.count() > 0) ]}/* {{ context.description.replacing("*/", "* /") }} */{[/]}
diff --git a/src/main-renderers/rendered-token-class.pr b/src/main-renderers/rendered-token-class.pr
@@ -26,11 +26,11 @@ Rendered as:
 *}
 {[ let token = context.token /]}
 
-{[ inject "rendered-description" context token /]}
-.{[ inject "rendered-name" context token /]} 
+{[ inject "rendered-description" context token /]} 
+.{[ inject "rendered-name" context token /]}
 
-{[ for alias in (findAliases(context.token, context.allTokens)) ]}
-, {[ inject "rendered-description" context alias /]}
+{[ for alias in findAliases(context.token, context.allTokens) ]}
+, {[ inject "rendered-description" context alias /]} 
 .{[ inject "rendered-name" context alias /]}
 {[/]} {
   {[ inject "rendered-value" context token /]}

diff --git a/src/main-renderers/rendered-token-var.pr b/src/main-renderers/rendered-token-var.pr
@@ -23,5 +23,4 @@ Rendered as:
 
 *}
 {[ let token = context /]}
-{[ inject "rendered-description" context token /]}
---{[ inject "rendered-name" context token /]}: {[ inject "rendered-value" context token /]};
+--{[ inject "rendered-name" context token /]}: {[ inject "rendered-value" context token /]}; {[ inject "rendered-description" context token /]}
diff --git a/src/main-renderers/rendered-value.pr b/src/main-renderers/rendered-value.pr
@@ -30,6 +30,6 @@ Rendered as:
 {[ case "Typography" ]}{[ inject "rendered-typography" context token.value /]}
 {[ case "Shadow" ]}{[ inject "rendered-shadow" context token /]}
 {[ case "Border" ]}{[ inject "rendered-border" context token.value /]}
-{[ case "Measure" ]}{[ inject "rendered-measure" context token.value /]} 
+{[ case "Measure" ]}{[ inject "rendered-measure" context token.value /]}
 {[ case "Gradient" ]}{[ inject "rendered-gradient" context token.value /]} 
 {[/]}
diff --git a/src/main-renderers/tailwind-variables.pr b/src/main-renderers/tailwind-variables.pr
@@ -0,0 +1,37 @@
+module.exports = {
+    'colors': {
+    {[ let brand = ds.currentBrand() /]}
+    {[ const colorGroup = ds.tokenGroupTreeByType("Color", brand.id) /]}
+    {[ traverse colorGroup property subgroups into subgroup ]}
+        {[ if !subgroup.isRoot ]}
+        {[ const tokens = ds.tokensByGroupId(subgroup.id) /]}
+        {[ if tokens.length !== 0 ]}
+        '{{ readableGroupName(subgroup)}}': {
+        {[ for token in tokens ]}
+            {[ let tokenName = cleanString(token.name) /]}
+            '{{ ((tokenName === "main") ? "DEFAULT" : tokenName) }}': '{[ inject "rendered-color" context token.value /]}', {[ inject "rendered-description" context token /]}
+
+        {[/]}
+        },
+        {[/]}
+        {[else]}
+        {[ const tokens = ds.tokensByGroupId(subgroup.id) /]}
+        {[ for token in tokens ]}
+        {[ let tokenName = token.name.replacing("$", "").lowercased().replacing(" ", "-") /]}
+        '{{ ((tokenName === "main") ? "DEFAULT" : tokenName) }}': '{[ inject "rendered-color" context token.value /]}', {[ inject "rendered-description" context token /]}
+
+        {[/]}
+        {[/]}
+    {[/]}
+    },
+    'boxShadow': {
+    {[ const shadowTokens = ds.tokensByType("Shadow", brand.id) /]}
+    {[ for token in shadowTokens ]}
+    {[ if (!token.isVirtual) ]}
+        {[ let tokenName = token.name.replacing("$", "").replacing(" ", "-") /]}
+        '{{ ((tokenName === "main") ? "DEFAULT" : tokenName) }}': 'var(--{[ inject "rendered-name" context token /]})', {[ inject "rendered-description" context token /]}
+
+    {[/]}
+    {[/]}
+    }
+}
diff --git a/src/shadows.pr b/src/shadows.pr
@@ -11,6 +11,7 @@ and their value rendered using `shadow-color` blueprint
 {[ if (!token.isVirtual) ]}
     {[ inject "rendered-token-var" context token /]}  
 
+
 {[/]}
 {[/]}
 }
diff --git a/src/token-renderers/rendered-measure.pr b/src/token-renderers/rendered-measure.pr
@@ -25,6 +25,8 @@ Note: Value is passed as `context` property because it is injected
 {[ unit = "%"/]}
 {[ case "Ems"]}
 {[ unit = "em"/]}
+{[ case "Rem"]}
+{[ unit = "rem"/]}
 {[/]}
 {{ context.measure }}{{ unit }}
 {[/]}
diff --git a/src/token-renderers/rendered-typography.pr b/src/token-renderers/rendered-typography.pr
@@ -51,7 +51,6 @@ Rendered as:
 [text]
 
 *}
-
 {[ let fontStyle = "normal" /]}
 {[ if ds.isFontItalic(context.font) ]}
   {[ fontStyle = "italic" /]}
@@ -63,9 +62,9 @@ font-size: {[ inject "rendered-measure" context context.fontSize /]};
 {[ if context.lineHeight ]}
 line-height: {[ inject "rendered-measure" context context.lineHeight /]};
 {[/]}
-letter-spacing: {[if (context.letterSpacing.unit === "Percent") ]} 
+letter-spacing: {[if (context.letterSpacing.unit === "Percent") ]}
 {{ (context.letterSpacing.measure / 100).rounded(2) }}em;
 {[ else ]}
 {[ inject "rendered-measure" context context.letterSpacing /]};
 {[/]}
-text-indent: {[ inject "rendered-measure" context context.paragraphIndent /]};
+text-indent: {[ inject "rendered-measure" context context.paragraphIndent /]};
diff --git a/src/typography.pr b/src/typography.pr
@@ -7,10 +7,16 @@ and their value rendered using `rendered-color` blueprint
 *}
 {[ let brand = ds.currentBrand() /]}
 {[ const allTokens = ds.tokensByType("Typography", brand.id) /]}
+@tailwind utilities;
+
+@layer utilities {
+
 {[ for token in allTokens ]}
 {[ if !token.referencedToken ]}
-{[ inject "rendered-token-class" context { "token": token, "allTokens": allTokens } /]}    
+  {[ inject "rendered-token-class" context { "token": token, "allTokens": allTokens } /]} 
 
 
 {[/]}
 {[/]}
+
+}
-Original file line number
+Diff line change
@@ @@ -11,6 +11,7 @@ and their value rendered using `shadow-color` blueprint @@
     {[ if (!token.isVirtual) ]}
         {[ inject "rendered-token-var" context token /]}
     {[/]}
     {[/]}
     }