Add Tailwind plugin

packages/cli/package.json

@@ -8,6 +8,8 @@
   },
   "keywords": [
     "design tokens",
+    "dtfm",
+    "dtcg",
     "cli",
     "w3c design tokens",
     "design system",

packages/plugin-css/.npmignore

@@ -1 +1,2 @@
+test
 tsconfig.json

packages/plugin-css/README.md

@@ -9,10 +9,14 @@ Generate CSS from your design tokens using [Cobalt](https://cobalt-ui.pages.dev)
 
 ## Setup
 
+Install the plugin from npm:
+
 ```bash
 npm i -D @cobalt-ui/plugin-css
 ```
 
+Then add to your `tokens.config.mjs` file:
+
 ```js
 // tokens.config.mjs
 import pluginCSS from '@cobalt-ui/plugin-css';

packages/plugin-css/package.json

@@ -8,7 +8,11 @@
   },
   "keywords": [
     "cobalt",
-    "design tokens"
+    "design tokens",
+    "design system",
+    "dtfm",
+    "w3c",
+    "css"
   ],
   "repository": {
     "type": "git",

packages/plugin-js/.npmignore

@@ -1 +1,2 @@
+test
 tsconfig.json

packages/plugin-js/README.md

@@ -4,16 +4,21 @@ Generate JSON and JS (with TypeScript types) from your design tokens using [Coba
 
 **Features**
 
+- ✅ Universal JSON format makes it easy to consume tokens in any platform (including native/compiled code)
 - ✅ Access all your design tokens safely and programatically in any frontend or backend setup
 - ✅ Full support for token modes (e.g. light/dark mode)
 - ✅ Automatic TypeScript types for strong typechecking (never have a broken style)
 
 ## Setup
 
+Install the plugin from npm:
+
 ```bash
 npm i -D @cobalt-ui/plugin-js
 ```
 
+Then add to your `tokens.config.mjs` file:
+
 ```js
 // tokens.config.mjs
 import pluginJS from '@cobalt-ui/plugin-js';

packages/plugin-js/package.json

@@ -8,7 +8,11 @@
   },
   "keywords": [
     "cobalt",
-    "design tokens"
+    "design tokens",
+    "design system",
+    "dtfm",
+    "dtcg",
+    "w3c"
   ],
   "repository": {
     "type": "git",

packages/plugin-sass/.npmignore

@@ -1 +1,2 @@
+test
 tsconfig.json

packages/plugin-sass/README.md

@@ -9,10 +9,14 @@ Generate `.scss` and `.sass` output from your design tokens using [Cobalt](https
 
 ## Setup
 
+Install the plugin (and its dependency) from npm:
+
 ```bash
 npm i -D @cobalt-ui/plugin-sass @cobalt-ui/plugin-css
 ```
 
+Then add to your `tokens.config.mjs` file:
+
 ```js
 // tokens.config.mjs
 import pluginSass from '@cobalt-ui/plugin-sass';

packages/plugin-sass/package.json

@@ -8,7 +8,13 @@
   },
   "keywords": [
     "cobalt",
-    "design tokens"
+    "design tokens",
+    "design system",
+    "dtfm",
+    "dtcg",
+    "w3c",
+    "css",
+    "sass"
   ],
   "repository": {
     "type": "git",

packages/plugin-tailwind/.npmignore

@@ -0,0 +1,2 @@
+test
+tsconfig.json

packages/plugin-tailwind/README.md

@@ -0,0 +1,77 @@
+# @cobalt-ui/plugin-tailwind
+
+Generate a [Tailwind CSS](https://tailwindcss.com/) preset from your design tokens.
+
+## Setup
+
+Install the plugin from npm:
+
+```bash
+npm i -D @cobalt-ui/plugin-tailwind
+```
+
+Then add to your `tokens.config.mjs` file, configuring [theme](https://tailwindcss.com/docs/configuration#theme) as you would normally, except replacing the values with token IDs:
+
+```js
+// tokens.config.mjs
+import pluginTailwind from '@cobalt-ui/plugin-tailwind';
+
+/** @type import('@cobalt-ui/core').Config */
+export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
+  plugins: [
+    pluginTailwind({
+      /** (optional) the path to the Tailwind preset */
+      output?: './tailwind-tokens.js',
+      /** (optional) module format to use (to match your Tailwind config) */
+      outputFormat?: 'esm' | 'cjs',
+      tailwind: {
+        theme: {
+          /** @see https://tailwindcss.com/docs/configuration#theme */
+          colors: {
+            blue: {
+              100: 'color.blue.100',
+              200: 'color.blue.200',
+              // …
+            },
+          },
+          fontFamily: {
+            sans: 'typography.family.base',
+            // …
+          },
+          extend: {
+            spacing: {
+              m: 'token.size.m.space',
+              // …
+            },
+            borderRadius: {
+              m: 'token.size.m.borderRadius',
+              // …
+            },
+          },
+        },
+      },
+    }),
+  ],
+};
+```
+
+Then, when you run `co build` in your project, it will generate a `./tokens/tailwind-tokens.js` file. Now add it to your Tailwind config under `presets` ([docs](https://tailwindcss.com/docs/configuration#presets)):
+
+```diff
++ import tailwindTokens from './tokens/tailwind-tokens.js';
+
+  /** @type {import('tailwindcss').Config} */
+  export default {
++   presets: [
++     tailwindTokens,
++   ],
+  };
+```
+
+_Note: if using CommonJS, use the `outputFormat: 'cjs'` plugin option._
+
+And you’re up and running! You’ll now have all your design tokens available in Tailwind.
+
+_✨ **Tip**: be sure to rerun `co build` to rebuild your Tailwind preset, or run `co build --watch` to rebuild your tokens every time they change!_

packages/plugin-tailwind/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@cobalt-ui/plugin-tailwind",
+  "version": "0.0.0",
+  "author": {
+    "name": "Drew Powers",
+    "email": "[email protected]"
+  },
+  "keywords": [
+    "cobalt",
+    "design tokens",
+    "design system",
+    "dtfm",
+    "dtcg",
+    "w3c",
+    "tailwind",
+    "css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/drwpow/cobalt-ui.git",
+    "directory": "packages/plugin-tailwind"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "scripts": {
+    "build": "run-s -s build:*",
+    "build:clean": "del dist",
+    "build:ts": "tsc",
+    "build:license": "node ../../scripts/inject-license.js @cobalt-ui/plugin-tailwind dist/index.js",
+    "dev": "tsc -w",
+    "test": "run-p -s test:*",
+    "test:js": "vitest run",
+    "test:ts": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@cobalt-ui/cli": "*",
+    "tailwindcss": "*"
+  },
+  "devDependencies": {
+    "@cobalt-ui/cli": "^1.6.0",
+    "@cobalt-ui/core": "^1.6.0",
+    "@types/node": "^20.5.7",
+    "npm-run-all": "^4.1.5",
+    "tailwindcss": "^3.3.3",
+    "vitest": "^0.34.3"
+  }
+}

packages/plugin-tailwind/src/index.ts

@@ -0,0 +1,22 @@
+import type {Plugin} from '@cobalt-ui/core';
+import type {} from 'tailwindcss';
+import {ThemeConfig} from 'tailwindcss/types/config';
+
+export interface Options {
+  /** The output path for the Tailwind preset (default: `./tailwind-tokens.js`) */
+  output?: string;
+  /** (optional) module format to use (to match your Tailwind config) */
+  outputFormat?: 'esm' | 'cjs';
+  tailwind: {
+    theme: ThemeConfig;
+  };
+}
+
+export default function pluginSass(options?: Options): Plugin {
+  return {
+    name: '@cobalt-ui/plugin-tailwind',
+    build(tokens) {
+      return [{filename: options?.output ?? './tailwind-tokens.js', src: ''}];
+    },
+  };
+}

packages/plugin-tailwind/test/index.test.ts

@@ -0,0 +1 @@
+describe('@cobalt-ui/plugin-tailwind', () => {});

packages/plugin-tailwind/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist/"
+  },
+  "include": ["src"]
+}