A sample Tailwind configuration file, heavily inspired by @PixelJanitor

tailwind.config.js

function spacing () {
  const scale = Array(201)
    .fill(null)
    .map((_, i) => [i * 0.5, `${i * 0.5 * 8}px`])
  const values = Object.fromEntries(scale)
  values.px = '1px'
  values.xs = '2px'
  values.sm = '4px'
  return values
}

function opacity () {
  const scale = Array(21)
    .fill(null)
    .map((_, i) => [i * 5, Math.round(i * 0.05 * 100) / 100])
  const values = Object.fromEntries(scale)
  return values
}

function colorify (cssVariableNames) {
  return Object.fromEntries(cssVariableNames.map(name =>
    [name, `rgb(var(--${name}) / <alpha-value>)`]
  ))
}

const baseColors = colorify([
  'bg-primary',
  'bg-secondary',

  'border-primary',
  'border-secondary',
  'border-tertiary',

  'text-primary',
  'text-secondary'
])

const semanticColors = colorify([
  'accent',
  'accent-bright',
  'accent-light'
])

module.exports = {
  theme: {
    container: {
      center: true,
      padding: '16px'
    },
    spacing: spacing(),

    extend: {
      backgroundColor: Object.assign({}, {
        primary: baseColors['bg-primary'],
        secondary: baseColors['bg-secondary']
      }, semanticColors),
      borderColor: Object.assign({}, {
        primary: baseColors['border-primary'],
        secondary: baseColors['border-secondary'],
        tertiary: baseColors['border-tertiary']
      }, semanticColors),
      boxShadowColor: Object.assign({}, semanticColors),
      textColor: Object.assign({}, {
        primary: baseColors['text-primary'],
        secondary: baseColors['text-secondary']
      }, semanticColors),
      maxWidth: spacing(),
      minWidth: spacing(),
      opacity: opacity()
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography')
  ],
  safelist: []
}