tailwind.config.js

function getScssTheme(...path) {
  return `get-theme(${path.join(' , ')})`;
}

function getScssThemeColors(color) {
  return {
    default: getScssTheme('colors', color, 5),
    1: getScssTheme('colors', color, 1),
    2: getScssTheme('colors', color, 2),
    3: getScssTheme('colors', color, 3),
    4: getScssTheme('colors', color, 4),
    5: getScssTheme('colors', color, 5),
    6: getScssTheme('colors', color, 6),
    7: getScssTheme('colors', color, 7),
    8: getScssTheme('colors', color, 8),
    9: getScssTheme('colors', color, 9),
  };
}

module.exports = {
  prefix: '',
  important: false,
  separator: ':',
  theme: {
    colors: {
      inherit: 'inherit',
      transparent: getScssTheme('colors', 'transparent'),
      lighten: getScssThemeColors('lighten'),
      darken: getScssThemeColors('darken'),
      disabled: getScssTheme('colors', 'disabled'),

      black: getScssTheme('colors', 'black'),
      white: getScssTheme('colors', 'white'),
      gray: getScssThemeColors('gray'),

      red: getScssThemeColors('red'),
      orange: getScssThemeColors('orange'),
      green: getScssThemeColors('green'),
      blue: getScssThemeColors('blue'),
      purple: getScssThemeColors('purple'),

      // add so we have primary/info/etc classnames
      primary: getScssTheme('colors', 'blue', 5),
      info: getScssTheme('colors', 'blue', 5),
      success: getScssTheme('colors', 'green', 5),
      warning: getScssTheme('colors', 'orange', 5),
      danger: getScssTheme('colors', 'red', 5),
    },
    spacing: {
      px: '1px',
      '0': '0',
      '1': '0.25rem',
      '2': '0.5rem',
      '3': '0.75rem',
      '4': '1rem',
      '5': '1.25rem',
      '6': '1.5rem',
      '8': '2rem',
      '10': '2.5rem',
      '12': '3rem',
      '16': '4rem',
      '18': '4.462rem', // 58px at standard 13px page font size
      '20': '5rem',
      '24': '6rem',
      '32': '8rem',
      '40': '10rem',
      '48': '12rem',
      '56': '14rem',
      '64': '16rem',
      '80': '20rem',
      '96': '24rem',
      '128': '32rem',
    },
    screens: {
      sm: { max: '767px' }, // mobile
      md: { max: '1007px' }, // tablet
      // lg: { min: '1008px' }, // desktop is the default
      print: { raw: 'print' },
    },
    fontFamily: {
      sans: [
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'Arial',
        '"Noto Sans"',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"',
      ],
      serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
      mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
    },
    fontSize: {
      xs: getScssTheme('fontSize, xs'),
      sm: getScssTheme('fontSize', 'sm'),
      base: getScssTheme('fontSize', 'base'),
      lg: getScssTheme('fontSize', 'lg'),
      xl: getScssTheme('fontSize', 'xl'),
      '2xl': getScssTheme('fontSize', '2xl'),
      '3xl': getScssTheme('fontSize', '3xl'),
      '4xl': getScssTheme('fontSize', '4xl'),
      '5xl': getScssTheme('fontSize', '5xl'),
      '6xl': getScssTheme('fontSize', '6xl'),
    },
    fontWeight: {
      hairline: getScssTheme('fontWeight', 'hairline'),
      thin: getScssTheme('fontWeight', 'thin'),
      light: getScssTheme('fontWeight', 'light'),
      normal: getScssTheme('fontWeight', 'normal'),
      medium: getScssTheme('fontWeight', 'medium'),
      semibold: getScssTheme('fontWeight', 'semibold'),
      bold: getScssTheme('fontWeight', 'bold'),
      extrabold: getScssTheme('fontWeight', 'extrabold'),
      black: getScssTheme('fontWeight', 'black'),
    },
    lineHeight: {
      none: 1,
      tight: 1.25,
      snug: 1.375,
      normal: 1.5,
      relaxed: 1.625,
      loose: 2,
    },
    letterSpacing: {
      tighter: '-.05em',
      tight: '-.025em',
      normal: '0',
      wide: '.025em',
      wider: '.05em',
      widest: '.1em',
    },
    textColor: theme => theme('colors'),
    backgroundColor: theme => theme('colors'),
    backgroundPosition: {
      bottom: 'bottom',
      center: 'center',
      left: 'left',
      'left-bottom': 'left bottom',
      'left-top': 'left top',
      right: 'right',
      'right-bottom': 'right bottom',
      'right-top': 'right top',
      top: 'top',
    },
    backgroundSize: {
      auto: 'auto',
      cover: 'cover',
      contain: 'contain',
    },
    borderWidth: {
      default: '1px',
      '0': '0',
      '2': '2px',
      '4': '4px',
      '8': '8px',
    },
    borderColor: theme => ({
      ...theme('colors'),
      default: theme('colors').gray[3],
    }),
    borderRadius: {
      none: getScssTheme('borderRadius', 'none'),
      sm: getScssTheme('borderRadius', 'sm'),
      default: getScssTheme('borderRadius', 'default'),
      lg: getScssTheme('borderRadius', 'lg'),
      full: getScssTheme('borderRadius', 'full'),
    },
    cursor: {
      auto: 'auto',
      default: 'default',
      pointer: 'pointer',
      wait: 'wait',
      move: 'move',
      'not-allowed': 'not-allowed',
    },
    width: theme => ({
      auto: 'auto',
      ...theme('spacing'),
      '1/2': '50%',
      '1/3': '33.33333%',
      '2/3': '66.66667%',
      '1/4': '25%',
      '3/4': '75%',
      '1/5': '20%',
      '2/5': '40%',
      '3/5': '60%',
      '4/5': '80%',
      '1/6': '16.66667%',
      '5/6': '83.33333%',
      full: '100%',
      screen: '100vw',
    }),
    height: theme => ({
      auto: 'auto',
      ...theme('spacing'),
      full: '100%',
      screen: '100vh',
    }),
    minWidth: {
      '0': '0',
      full: '100%',
    },
    minHeight: {
      '0': '0',
      full: '100%',
      screen: '100vh',
    },
    maxWidth: {
      xs: '20rem',
      sm: '24rem',
      md: '28rem',
      lg: '32rem',
      xl: '36rem',
      '2xl': '42rem',
      '3xl': '48rem',
      '4xl': '56rem',
      '5xl': '64rem',
      '6xl': '72rem',
      full: '100%',
    },
    maxHeight: {
      full: '100%',
      screen: '100vh',
    },
    padding: theme => theme('spacing'),
    margin: theme => ({
      auto: 'auto',
      ...theme('spacing'),
      '-px': '-1px',
      '-1': '-0.25rem',
      '-2': '-0.5rem',
      '-3': '-0.75rem',
      '-4': '-1rem',
      '-5': '-1.25rem',
      '-6': '-1.5rem',
      '-8': '-2rem',
      '-10': '-2.5rem',
      '-12': '-3rem',
      '-16': '-4rem',
      '-20': '-5rem',
      '-24': '-6rem',
      '-32': '-8rem',
      '-40': '-10rem',
      '-48': '-12rem',
      '-56': '-14rem',
      '-64': '-16rem',
    }),
    negativeMargin: theme => theme('spacing'),
    objectPosition: {
      bottom: 'bottom',
      center: 'center',
      left: 'left',
      'left-bottom': 'left bottom',
      'left-top': 'left top',
      right: 'right',
      'right-bottom': 'right bottom',
      'right-top': 'right top',
      top: 'top',
    },
    boxShadow: {
      default: getScssTheme('boxShadow', 'default'),
      md: getScssTheme('boxShadow', 'md'),
      lg: getScssTheme('boxShadow', 'lg'),
      inner: getScssTheme('boxShadow', 'inner'),
      outline: getScssTheme('boxShadow', 'outline'),
      none: getScssTheme('boxShadow', 'none'),
    },
    zIndex: {
      auto: 'auto',
      '0': 0,
      '10': 10,
      '20': 20,
      '30': 30,
      '40': 40,
      '50': 50,
    },
    opacity: {
      '0': '0',
      '25': '.25',
      '50': '.5',
      '75': '.75',
      '100': '1',
    },
    fill: {
      current: 'currentColor',
    },
    stroke: {
      current: 'currentColor',
    },
    flex: {
      '1': '1 1 0%',
      auto: '1 1 auto',
      initial: '0 1 auto',
      none: 'none',
    },
    flexGrow: {
      '0': 0,
      default: 1,
    },
    flexShrink: {
      '0': 0,
      default: 1,
    },
    listStyleType: {
      none: 'none',
      disc: 'disc',
      decimal: 'decimal',
    },
    inset: {
      '0': 0,
      auto: 'auto',
    },
    container: {},
  },
  variants: {
    appearance: [],
    backgroundAttachment: [],
    backgroundColor: ['hover', 'focus', 'active', 'dark', 'dark-hover', 'dark-active'],
    backgroundPosition: [],
    backgroundRepeat: [],
    backgroundSize: [],
    borderCollapse: [],
    borderColor: ['hover', 'focus', 'active', 'dark'],
    borderRadius: [],
    borderStyle: [],
    borderWidth: ['dark'],
    cursor: [],
    display: ['responsive', 'group-hover'],
    flexDirection: ['responsive'],
    flexWrap: ['responsive'],
    alignItems: ['responsive'],
    alignSelf: [],
    justifyContent: ['responsive'],
    alignContent: [],
    flex: ['responsive'],
    flexGrow: [],
    flexShrink: [],
    float: [],
    fontFamily: [],
    fontWeight: ['hover', 'focus'],
    height: ['responsive'],
    lineHeight: [],
    listStylePosition: [],
    listStyleType: [],
    margin: ['responsive'],
    maxHeight: [],
    maxWidth: [],
    minHeight: [],
    minWidth: [],
    negativeMargin: [],
    objectFit: [],
    objectPosition: [],
    opacity: ['hover', 'focus', 'group-hover'],
    outline: ['focus'],
    overflow: ['responsive'],
    padding: ['responsive'],
    pointerEvents: [],
    position: ['responsive'],
    inset: [],
    resize: [],
    boxShadow: ['hover', 'focus', 'dark'],
    fill: [],
    stroke: [],
    tableLayout: [],
    textAlign: ['responsive'],
    textColor: ['hover', 'focus', 'active', 'dark'],
    fontSize: ['responsive'],
    fontStyle: [],
    textTransform: [],
    textDecoration: ['hover', 'focus'],
    fontSmoothing: [],
    letterSpacing: [],
    userSelect: [],
    verticalAlign: [],
    visibility: ['responsive', 'group-hover'],
    whitespace: ['responsive'],
    wordBreak: ['responsive'],
    width: ['responsive'],
    zIndex: [],
  },
  corePlugins: {},
  plugins: [
    function({ addUtilities, addComponents, addVariant, e, prefix, config }) {
      addVariant('dark', ({ modifySelectors, separator, container }) => {
        container.walkRules(rule => {
          rule.selector = `.${process.env.BLUEPRINT_NAMESPACE || 'bp3'}-dark .${e(
            `dark${separator}${rule.selector.slice(1)}`
          )}`;
        });
      });
      addVariant('dark-hover', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${process.env.BLUEPRINT_NAMESPACE || 'bp3'}-dark .${e(`dark-hover${separator}${className}`)}:hover`;
        });
      });
      addVariant('dark-active', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${process.env.BLUEPRINT_NAMESPACE || 'bp3'}-dark .${e(
            `dark-active${separator}${className}`
          )}:active`;
        });
      });
    },
  ],
};