@andreibratila/tailwind-utopia/src/core/defaults.js

A Tailwindcss v4 library for fluid typography and spacing with Utopia

export const DEFAULT_OUTPUT_PATH = "./tailwind-utopia.css";
export const DEFAULT_CONFIG_FILE = "tailwind-utopia.config.js";

export const DEFAULT_SPACING_UTILITIES = {
  m: ["margin"],
  mx: ["margin-left", "margin-right"],
  my: ["margin-top", "margin-bottom"],
  mt: ["margin-top"],
  mr: ["margin-right"],
  mb: ["margin-bottom"],
  ml: ["margin-left"],
  "-m": ["margin"],
  "-mx": ["margin-left", "margin-right"],
  "-my": ["margin-top", "margin-bottom"],
  "-mt": ["margin-top"],
  "-mr": ["margin-right"],
  "-mb": ["margin-bottom"],
  "-ml": ["margin-left"],
  p: ["padding"],
  px: ["padding-left", "padding-right"],
  py: ["padding-top", "padding-bottom"],
  pt: ["padding-top"],
  pr: ["padding-right"],
  pb: ["padding-bottom"],
  pl: ["padding-left"],
  "space-x": [],
  "space-y": [],
  "-space-x": [],
  "-space-y": [],
  gap: ["gap"],
  "gap-x": ["column-gap"],
  "gap-y": ["row-gap"],
  w: ["width"],
  h: ["height"],
  inset: ["top", "right", "bottom", "left"],
  "inset-x": ["left", "right"],
  "inset-y": ["top", "bottom"],
  top: ["top"],
  right: ["right"],
  bottom: ["bottom"],
  left: ["left"],
  "-inset": ["top", "right", "bottom", "left"],
  "-inset-x": ["left", "right"],
  "-inset-y": ["top", "bottom"],
  "-top": ["top"],
  "-right": ["right"],
  "-bottom": ["bottom"],
  "-left": ["left"],
};

export const defaultConfig = {
  prefix: "fluid",
  output: DEFAULT_OUTPUT_PATH,
  typography: {
    minWidth: 320,
    maxWidth: 1140,
    minSize: 18,
    maxSize: 20,
    minScale: 1.2,
    maxScale: 1.25,
    baseStep: "base",
    steps: {
      xs: { lineHeight: 1.4 },
      sm: { lineHeight: 1.45 },
      base: { lineHeight: 1.5 },
      lg: { lineHeight: 1.45 },
      xl: { lineHeight: 1.3 },
      "2xl": { lineHeight: 1.2 },
      "3xl": { lineHeight: 1.1 },
      "4xl": { lineHeight: 1 },
    },
  },
  spacing: {
    enabled: true,
    scale: {
      "3xs": 0.25,
      "2xs": 0.5,
      xs: 0.75,
      sm: 1,
      md: 1.5,
      lg: 2,
      xl: 3,
      "2xl": 4,
      "3xl": 6,
    },
    pairs: "contiguous",
    customPairs: [],
    utilities: DEFAULT_SPACING_UTILITIES,
  },
};

export function createConfigTemplate() {
  return `import { defineConfig } from "@andreibratila/tailwind-utopia";

export default defineConfig({
  // Prefix used in generated classes such as text-fluid-base and mt-fluid-sm.
  prefix: "${defaultConfig.prefix}",

  // Output CSS file generated by the CLI.
  output: "${defaultConfig.output}",

  typography: {
    // Viewport bounds used by the fluid interpolation.
    minWidth: ${defaultConfig.typography.minWidth},
    maxWidth: ${defaultConfig.typography.maxWidth},

    // Base size and modular scales for the named text steps.
    minSize: ${defaultConfig.typography.minSize},
    maxSize: ${defaultConfig.typography.maxSize},
    minScale: ${defaultConfig.typography.minScale},
    maxScale: ${defaultConfig.typography.maxScale},

    // Must match one of the keys in typography.steps.
    baseStep: "${defaultConfig.typography.baseStep}",

    // Object order matters: each key becomes a generated text utility.
    steps: {
      xs: { lineHeight: 1.4 },
      sm: { lineHeight: 1.45 },
      base: { lineHeight: 1.5 },
      lg: { lineHeight: 1.45 },
      xl: { lineHeight: 1.3 },
      "2xl": { lineHeight: 1.2 },
      "3xl": { lineHeight: 1.1 },
      "4xl": { lineHeight: 1 }
    }
  },

  spacing: {
    enabled: true,

    // Named spacing tokens used to generate mt-fluid-sm, gap-fluid-lg, etc.
    scale: {
      "3xs": 0.25,
      "2xs": 0.5,
      xs: 0.75,
      sm: 1,
      md: 1.5,
      lg: 2,
      xl: 3,
      "2xl": 4,
      "3xl": 6
    },

    // Either "contiguous" or false.
    pairs: "contiguous",

    // Optional extra pair tokens, for example ["xs-lg", "sm-xl"].
    customPairs: [],

    // Built-in utilities can be overridden or extended here.
    utilities: {
      m: ["margin"],
      mx: ["margin-left", "margin-right"],
      my: ["margin-top", "margin-bottom"],
      mt: ["margin-top"],
      mr: ["margin-right"],
      mb: ["margin-bottom"],
      ml: ["margin-left"],
      "-m": ["margin"],
      "-mx": ["margin-left", "margin-right"],
      "-my": ["margin-top", "margin-bottom"],
      "-mt": ["margin-top"],
      "-mr": ["margin-right"],
      "-mb": ["margin-bottom"],
      "-ml": ["margin-left"],
      p: ["padding"],
      px: ["padding-left", "padding-right"],
      py: ["padding-top", "padding-bottom"],
      pt: ["padding-top"],
      pr: ["padding-right"],
      pb: ["padding-bottom"],
      pl: ["padding-left"],
      "space-x": [],
      "space-y": [],
      "-space-x": [],
      "-space-y": [],
      gap: ["gap"],
      "gap-x": ["column-gap"],
      "gap-y": ["row-gap"],
      w: ["width"],
      h: ["height"],
      inset: ["top", "right", "bottom", "left"],
      "inset-x": ["left", "right"],
      "inset-y": ["top", "bottom"],
      top: ["top"],
      right: ["right"],
      bottom: ["bottom"],
      left: ["left"],
      "-inset": ["top", "right", "bottom", "left"],
      "-inset-x": ["left", "right"],
      "-inset-y": ["top", "bottom"],
      "-top": ["top"],
      "-right": ["right"],
      "-bottom": ["bottom"],
      "-left": ["left"]
    }
  }
});\n`;
}