tailwind.config.js

const Color = require('color');
const screens = require("./screens");

const alpha = (clr, val) => Color(clr).alpha(val).rgb().string();
const lighen = (clr, val) => Color(clr).lighten(val).rgb().string();
const darken = (clr, val) => Color(clr).darken(val).rgb().string();

module.exports = {
  theme: {
    extend: {
      maxWidth: {
        'xxs': '16rem',
      },
      opacity: {
        '85': '0.85',
      },
      lineHeight: {
        'negative': '0.9',
      },
      spacing: {
        '0/5': '0.125rem',
        '28': '7rem',
        '36': '9rem',
        '44': '11rem',
        '52': '13rem',
        '80': '20rem'
      }
    },
    // Breakpoints
    screens,
    fontFamily: {
      alt: ['Bebas Neue', 'Helvetica', 'Arial', 'sans-serif'],
      body: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
      condensed: ['Roboto Condensed', 'Helvetica', 'Arial', 'sans-serif'],
    },
    fontSize: {
      '2xs': '.65rem',
      'xs': '.75rem',
      'sm': '.875rem',
      'base': '1rem',
      'lg': '1.125rem',
      'xl': '1.3rem',
      '2xl': '1.6rem',
      '3xl': '1.875rem',
      '4xl': '2.45rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '5.3rem',
      '8xl': '6.5rem',
      '9xl': '7.5rem',
    },
    fontWeight: {
      light: 300,
      normal: 400,
      medium: 500,
      bold: 700,
    },
    colors: {
      'transparent': 'transparent',
      'black': '#000000',
      'white': '#ffffff',
      'grey': {
        '50': '#f7f7f7',
        '100': '#f3f3f3',
        '125': '#f0f0f0',
        '200': '#adadad',
        '300': '#4c4c4c',
        '400': '#343434',
        '500': '#303132',
        '600': '#262626',
        '700': '#202020',
        '800': '#1f1f1f',
      },
      'green': {
        '100': '#d6e8b3',
        '200': '#92c6ab',
        '300': darken('#92c6ab', 0.1),
      },
      'brands': {
        'facebook': '#067ceb',
        'twitter': '#00c9ff',
        'gmail': '#ec230e',
        'linkedin': '#0066a9',
      },
      'blue': {
        '100': '#abcdef',
        '200': '#76b4cf',
        '300': '#027da8',
      },
      'cyan': {
        '100': '#a7d4d1',
        '200': '#57b3bd',
        '300': '#3e8793',
        '400': '#497280',
        '500': '#004958',
      },
      'orange': {
        '100': '#f2d29f',
        '200': '#f1ae7b',
        '300': '#ed9654',
      },
      'violet': {
        '100': '#edc8bd',
        '200': '#d28c94',
        '300': '#8d415f',
        '400': '#840048',
        '500': '#670047',
      },
    },
    container: {
      center: true,
      /* @note: needs to be kept in sync with tailwind css/atoms/container.pcss */
      padding: {
        default: '1rem',
        xl: '2rem',
      },
    },
    textDecorationColor: { // defaults to theme => theme('colors')
      'white': '#fff',
      'black': '#000',
    },
  },
  variants: {
    textDecorationColor: ['responsive', 'hover'],
    background: ['responsive'],
    appearance: ['responsive'],
    space: ['responsive'],
    text: ['responsive', 'hover'],
    zIndex: ['responsive'],
  },
  plugins: [
    require('tailwind-css-variables')(
      {
        // modules
      },
      {
        // options
      }
    ),
    require('tailwindcss-typography')({
      // all these options default to the values specified here
      ellipsis: false,         // whether to generate ellipsis utilities
      hyphens: false,          // whether to generate hyphenation utilities
      kerning: false,          // whether to generate kerning utilities
      textUnset: false,        // whether to generate utilities to unset text properties
      componentPrefix: 'typeset-',  // the prefix to use for text style classes
    }),
    require('tailwindcss-elevation')(['responsive', 'hover'], {
      color: "#dddddd",
      opacityBoost: '0.23',
    }),
    require("./tailwind-plugins/buttons")({
      defaultColor: {
        text: 'white',
        background: 'black',
        iconBorder: 'grey.300'
      },
      colors: {
        'black': {
          text: 'white',
          background: 'black',
          iconBorder: 'grey.400',
          hoverIconBorder: 'grey.600',
        },
        'grey-700': {
          text: 'white',
          background: 'grey.700',
          iconBorder: 'grey.500',
          hoverBackground: 'grey.400',
          hoverIconBorder: 'grey.600',
        },
        'grey-500': {
          text: 'white',
          background: 'grey.500',
          iconBorder: 'grey.300',
          hoverBackground: 'grey.300',
          hoverIconBorder: 'grey.400',
        },
        'grey-125': {
          text: 'black',
          background: 'grey.125',
        },
        'white': {
          text: 'black',
          background: 'white',
          iconBorder: 'grey.100',
        },
        'blue-300': {
          text: 'white',
          background: 'blue.300',
        },
        'cyan-200': {
          text: 'white',
          background: 'cyan.200',
        },
        'green-200': {
          text: 'white',
          background: 'green.200',
        },
        'orange-300': {
          text: 'white',
          background: 'orange.300',
        },
        'violet-400': {
          text: 'white',
          background: 'violet.400',
        },
        'violet-500': {
          text: 'white',
          background: 'violet.500',
        },
        'brands-facebook': {
          text: 'white',
          background: 'brands.facebook',
        }
      }
    })
  ]
}