add utopia and primary/secondary color to tailwind.config.mjs

tailwind.config.mjs

/** @type {import('tailwindcss').Config} */

/*********************************************************
 * You need to first install "npm i utopia-core"
 * Then you will be able to use the following:
 * font-size: e.g. text-u-6, text-u-0, text-u--2
 * spacing: e.g. w-u-3xl, w-u-m, w-u-3xs, w-u-s-l, w-u-500-600
 * color: e.g. bg-pri-100, bg-pri-500 (bg-pri), bg-pri-900
 *             bg-sec-100, bg-sec-500 (bg-sec), bg-sec-900
 ********************************************************/

import {
  calculateTypeScale,
  calculateSpaceScale,
  calculateClamps,
} from "utopia-core";

/*********************************************************
 * user defined parameters
 ********************************************************/
const minViewportWidth = 375,
  maxViewportWidth = 1000,
  minFontSizePx = 18,
  maxFontSizePx = 20,
  prefix = "u-",
  primaryHue = 180,
  secondaryHue = 60;

/*********************************************************
 * Utopia type scale
 ********************************************************/
const fontSize = Object.fromEntries(
  calculateTypeScale({
    minWidth: minViewportWidth,
    maxWidth: maxViewportWidth,
    minFontSize: minFontSizePx,
    maxFontSize: maxFontSizePx,
    minTypeScale: 1.2,
    maxTypeScale: 1.25,
    positiveSteps: 6,
    negativeSteps: 2,
  }).map((t) => [`${prefix}${t.step}`, t.clamp])
);

/*********************************************************
 * Utopia spacing scale
 ********************************************************/
const { sizes, oneUpPairs, customPairs } = calculateSpaceScale({
  minWidth: minViewportWidth,
  maxWidth: maxViewportWidth,
  minSize: minFontSizePx,
  maxSize: maxFontSizePx,
  positiveSteps: [1.5, 2, 3, 4, 6],
  negativeSteps: [0.75, 0.5, 0.25],
  customSizes: ["s-l"],
});
const clamps = calculateClamps({
  minWidth: minViewportWidth,
  maxWidth: maxViewportWidth,
  pairs: [[500, 600]],
});
const spacing = Object.fromEntries(
  [...sizes, ...oneUpPairs, ...customPairs, ...clamps].map((t) => [
    `${prefix}${t.label}`,
    t.clamp,
  ])
);

/*********************************************************
 * generate colors
 ********************************************************/
function generateColors(hue) {
  let _colors = Array.from({ length: 9 }).map((p, i) => {
    const key = 100 * i + 100;
    const color = `hsl(${hue},100%,${10 * i + 10}%)`;
    return [key, color];
  });
  _colors.push(["DEFAULT", `hsl(${hue},100%,50%)`]);
  return Object.fromEntries(_colors);
}
const colors = {
  pri: generateColors(primaryHue),
  sec: generateColors(secondaryHue),
};

/*********************************************************
 * export
 ********************************************************/
const config = {
  content: ["src/**/*.tsx"],
  theme: {
    extend: {
      colors,
      fontSize,
      spacing,
    },
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
};

export default config;

This is to add Trys Mudford and James Gilyead's utopia css (https://utopia.fyi/) to taiwind config file. Unlike the other tailwind utopia plugins, I use the official utopia-core library to calculate the values, which makes the result consistent with what you get from the official website.

I also add primary/secondary colors as a bonus :-) although it is not related to utopia.