How to use?

[RickCogley]

Thank you for your work. Sorry, not an issue but rather a question if you don't mind.

To use these you specify in tailwind.config.js similar to the following?

const plugin = require('tailwindcss/plugin');
const postcss = require('postcss');
const postcssJs = require('postcss-js');

const clampGenerator = require('./src/css-utils/clamp-generator.js'); // just changing to .ts?
const tokensToTailwind = require('./src/css-utils/tokens-to-tailwind.js'); // just changing to .ts?

// Raw design tokens
const colorTokens = require('./src/design-tokens/colors.json');
const fontTokens = require('./src/design-tokens/fonts.json');
const spacingTokens = require('./src/design-tokens/spacing.json');
const textSizeTokens = require('./src/design-tokens/text-sizes.json');
...

// Process design tokens
const colors = tokensToTailwind(colorTokens.items);
const fontFamily = tokensToTailwind(fontTokens.items);
const fontWeight = tokensToTailwind(textWeightTokens.items);
const fontSize = tokensToTailwind(clampGenerator(textSizeTokens.items));
... etc ...

[chrismwilliams]

Thanks @RickCogley, yeah sorry it's a bit bare-bones here and has a some rough edges!

Yep you got it, my internal template looks like this:

import { clampGenerator, tokensToTailwind } from "@chriswilliams/tokens-to-tailwind";
import plugin from "tailwindcss/plugin";

// Design Tokens
import colorTokens from "./src/css/design-tokens/colors.json";
import fontTokens from "./src/css/design-tokens/fonts.json";
import spacingTokens from "./src/css/design-tokens/spacing.json";
import textSizeTokens from "./src/css/design-tokens/text-sizes.json";
import textWeightTokens from "./src/css/design-tokens/text-weights.json";
import viewports from "./src/css/design-tokens/viewports.json";

// Process tokens: note viewports is optional
const colors = tokensToTailwind(colorTokens.items);
const fontFamily = tokensToTailwind(fontTokens.items);
const fontSize = tokensToTailwind(clampGenerator(textSizeTokens.items, viewports));
const fontWeight = tokensToTailwind(textWeightTokens.items);
const spacing = tokensToTailwind(clampGenerator(spacingTokens.items, viewports));

[RickCogley]

Appreciate that! What generator are you using?

[chrismwilliams]

Just utopia.fyi, the same as the cube-boilerplate