tailwind.config.js

const colors = require('tailwindcss/colors')

const fontScale = 1.333
const spacingScale = fontScale * fontScale
const borderWidthScale = fontScale * fontScale
const borderRadiusScale = 1.2
const sizes = {
  "xxxxl": 5.61,
  "xxxl": 4.209,
  "xxl": 3.157,
  "xl": 2.369,
  "lg": 1.777,
  "md": 1.333,
  "body": 1,
  "sm": 0.75,
  "xs": 0.563,
}

const sizeUp = [
  "md",
  "lg",
  "xl",
  "xxl",
  "xxxl",
  "xxxxl",
]
const sizeDown = [
  "sm",
  "xs",
]

const fontSize = {}
const spacing = {}
const borderRadius = {
  "none": "0",
  "xs": ".125rem",
  "sm": ".25rem",
  "md": ".5rem",
  "lg": "1rem",
  "xl": "1.5rem",
  "xxl": "2rem",
  "xxxl": "3rem",
  "xxxxl": "5rem",
  "pill": "9999px",
  "100": "100%",
  "full": "9999px"
}
const borderWidth = {}

spacing["none"] = "0"
sizeDown.forEach((key, index) => {
  fontSize[key] = `${Math.pow(fontScale,-(index + 1))}rem`
  spacing[key] = `${Math.pow((spacingScale),-(index + 1))}rem`
  borderWidth[key] = `${Math.pow(borderWidthScale,-(index + 1))}px`
})
fontSize["body"] = "1rem"
spacing["body"] = "1rem"
sizeUp.forEach((key, index) => {
  fontSize[key] = `${Math.pow(fontScale,(index + 1))}rem`
  spacing[key] = `${Math.pow((spacingScale),(index + 1))}rem`
  borderWidth[key] = `${Math.pow(borderWidthScale,(index + 1))}px`
})

module.exports = {
  content: [
    "./app/views/**/*.html.erb",
    "./app/components/**/*",
    "./app/helpers/**/*.rb",
    "./app/assets/stylesheets/**/*.css",
    "./app/javascript/**/*.js"
  ],
  theme: {
    fontFamily: {
      "heading": [
        "ui-rounded",
        "Hiragino Maru Gothic ProN",
        "Quicksand",
        "Comfortaa",
        "Manjari",
        "Arial Rounded MT",
        "Arial Rounded MT Bold",
        "Calibri",
        "source-sans-pro",
        "sans-serif",
      ],
      "body": [
        "Charter",
        "Bitstream Charter",
        "Sitka Text",
        "Cambria",
        "serif",
      ],
      "mono": [ "Nimbus Mono PS", "Courier New", "monospace"],
    },
    fontSize: Object.assign(fontSize,{ DEFAULT: fontSize.body }),
    spacing: spacing,
    borderRadius: Object.assign(borderRadius,{ DEFAULT: "0.25rem" }),
    borderWidth: Object.assign(borderWidth,{ DEFAULT: "1px" }),
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      red: colors.red,
      orange: colors.orange,
      yellow: colors.amber,
      green: colors.green,
      blue: colors.sky,
      purple: colors.purple,
      gray: colors.gray,
    }
  }
}