@barguide/style-guide/src/tailwind.config.ts

BarGuide.io | CSS Style Guide

import { color } from './variables/color';
import { font } from './variables/font';
import { grid } from './variables/grid';

/**
 * @description A helper to take the {number} type "values" and add the
 * suffix of "px" for use in tailwinds config. Now we get to use the same
 * variables in JS and CSS quickly
 */
const valueToPixels = (data: Record<string, number>) => {
  const gridInPixels: Record<string, string> = {};

  Object.keys(data).forEach((key) => {
    gridInPixels[key] = `${data[key]}px`;
  });

  return gridInPixels;
};

/**
 * @description Build up our custom tailwind config
 * @external https://tailwindcss.com/docs/installation
 */
const config = {
  prefix: 'u-',
  purge: false,
  theme: {
    borderRadius: {
      4: `${grid['1xs']}px`,
      full: '100%'
    },
    colors: color,
    fontFamily: font.family,
    fontSize: valueToPixels(font.size),
    letterSpacing: {
      normal: 0,
      wide: `${grid['1xxs']}px`
    },
    spacing: valueToPixels(grid),
    width: {
      auto: 'auto',
      full: '100%'
    }
  }
};

module.exports = config;