TailwindCSS config for SubsetCSS https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js

.subsetcss.js

const colors = [
  'transparent',  // transparent
  '#000', // black
  '#fff', // white

  // gray
  '#f7fafc',  // 100
  '#edf2f7',  // 200
  '#e2e8f0',  // 300
  '#cbd5e0',  // 400
  '#a0aec0',  // 500
  '#718096',  // 600
  '#4a5568',  // 700
  '#2d3748',  // 800
  '#1a202c',  // 900
  
  // red
  '#fff5f5',  // 100
  '#fed7d7',  // 200
  '#feb2b2',  // 300
  '#fc8181',  // 400
  '#f56565',  // 500
  '#e53e3e',  // 600
  '#c53030',  // 700
  '#9b2c2c',  // 800
  '#742a2a',  // 900

  // orange
  '#fffaf0',  // 100
  '#feebc8',  // 200
  '#fbd38d',  // 300
  '#f6ad55',  // 400
  '#ed8936',  // 500
  '#dd6b20',  // 600
  '#c05621',  // 700
  '#9c4221',  // 800
  '#7b341e',  // 900

  // yellow: {
  '#fffff0',  // 100
  '#fefcbf',  // 200
  '#faf089',  // 300
  '#f6e05e',  // 400
  '#ecc94b',  // 500
  '#d69e2e',  // 600
  '#b7791f',  // 700
  '#975a16',  // 800
  '#744210',  // 900

  // green
  '#f0fff4',  // 100
  '#c6f6d5',  // 200
  '#9ae6b4',  // 300
  '#68d391',  // 400
  '#48bb78',  // 500
  '#38a169',  // 600
  '#2f855a',  // 700
  '#276749',  // 800
  '#22543d',  // 900

  // teal
  '#e6fffa',  // 100
  '#b2f5ea',  // 200
  '#81e6d9',  // 300
  '#4fd1c5',  // 400
  '#38b2ac',  // 500
  '#319795',  // 600
  '#2c7a7b',  // 700
  '#285e61',  // 800
  '#234e52',  // 900

  // blue
  '#ebf8ff',  // 100
  '#bee3f8',  // 200
  '#90cdf4',  // 300
  '#63b3ed',  // 400
  '#4299e1',  // 500
  '#3182ce',  // 600
  '#2b6cb0',  // 700
  '#2c5282',  // 800
  '#2a4365',  // 900

  // indigo
  '#ebf4ff',  // 100
  '#c3dafe',  // 200
  '#a3bffa',  // 300
  '#7f9cf5',  // 400
  '#667eea',  // 500
  '#5a67d8',  // 600
  '#4c51bf',  // 700
  '#434190',  // 800
  '#3c366b',  // 900

  // purple
  '#faf5ff',  // 100
  '#e9d8fd',  // 200
  '#d6bcfa',  // 300
  '#b794f4',  // 400
  '#9f7aea',  // 500
  '#805ad5',  // 600
  '#6b46c1',  // 700
  '#553c9a',  // 800
  '#44337a',  // 900

  // pink
  '#fff5f7',  // 100
  '#fed7e2',  // 200
  '#fbb6ce',  // 300
  '#f687b3',  // 400
  '#ed64a6',  // 500
  '#d53f8c',  // 600
  '#b83280',  // 700
  '#97266d',  // 800
  '#702459',  // 900
];
const spacing = [
  '0', // 0
  '1px', // px
  '0.25rem', // 1
  '0.5rem',  // 2
  '0.75rem', // 3
  '1rem',  // 4
  '1.25rem', // 5
  '1.5rem',  // 6
  '2rem',  // 8
  '2.5rem',  // 10
  '3rem',  // 12
  '4rem',  // 16
  '5rem',  // 20
  '6rem',  // 24
  '8rem',  // 32
  '10rem', // 40
  '12rem', // 48
  '14rem', // 56
  '16rem', // 64
];

const negative = values => {
  return values.reduce((all, value) => {
    if (value !== '0') {
      all.push(`-${value}`);
    }
  }, []);
};

module.exports = {
  'subsets': {
    'font-size': [
      '0.75rem',  // xs
      '0.875rem', // sm
      '1rem',     // base
      '1.125rem', // lg
      '1.25rem',  // xl
      '1.5rem',   // 2xl 
      '1.875rem', // 3xl
      '2.25rem',  // 4xl
      '3rem',     // 5xl
      '4rem',     // 6xl
    ],
    'font-weight': [
      '100',  // hairline
      '200',  // thin
      '300',  // light
      '400',  // normal
      '500',  // medium
      '600',  // semibold
      '700',  // bold
      '800',  // extrabold
      '900',  // black
    ],
    'font-family': [
      // 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',
    ],
    'height': [
      ...spacing,
      'auto', // auto
      '100%', // full
      '100vh',  // screen
    ],
    'inset': [
      '0',  // 0
      'auto', // auto
    ],
    'letter-spacing': [
      '-0.05em',  // tighter
      '-0.025em', // tight
      '0',  // normal
      '0.025em',  // wide
      '0.05em', // wider
      '0.1em',  // widest
    ],
    'line-height': [
      '1',  // none
      '1.25', // tight
      '1.375',  // snug
      '1.5',  // normal
      '1.625',  // relaxed
      '2',  // loose
    ],
    'list-style-type': [
      'none', // none
      'disc', // disc
      'decimal', //decimal
    ],
    'margin': [
      'auto', // auto
      ...spacing,
      ...negative(spacing)
    ],
    'max-height': [
      '100%', // full
      '100vh' // screen
    ],
    'max-width': [
      '20rem', // xs
      '24rem', // sm
      '28rem', // md
      '32rem', // lg
      '36rem', // xl
      '42rem', // '2xl'
      '48rem', // '3xl'
      '56rem', // '4xl'
      '64rem', // '5xl'
      '72rem', // '6xl'
      '100%', // full
    ],
    'min-height': [
      '0', // 0
      '100%', // full
      '100vh' // screen
    ],
    'min-width': [
      '0', // 0
      '100%' // full
    ],
    'border-width': [
      '0',    // 0
      '1px',  // default
      '2px',  // 2
      '4px',  // 4
      '8px',  // 8
    ],
    'border-radius': [
      '0',        // none
      '0.125rem', // sm
      '0.25rem',  // default
      '0.5rem',   // lg
      '9999px',   // full
    ],
    'border-color': [
      ...colors
    ],
    'border-style': ['solid'],
    'box-shadow': [
      '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',  // default
      '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',  // md
      '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',  // lg
      '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',  // xl
      '0 25px 50px -12px rgba(0, 0, 0, 0.25)',  // '2xl
      'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',  // inner
      '0 0 0 3px rgba(66, 153, 225, 0.5)',  // outline
      'none', // none
    ],
    'cursor': [
      'auto', // auto
      'default',  // default
      'pointer',  // pointer
      'wait', // wait
      'text', // text
      'move', // move
      'not-allowed',  // not-allowed
    ],
    'fill': [
      'currentColor' // current
    ],
    'flex': [
      '1 1 0%',  // 1
      '1 1 auto', // auto
      '0 1 auto', // initial
      'none', // none
    ],
    'flex-grow': [
      '0',  // 0
      '1', // default
    ],
    'flex-shrink': [
      '0',  // 0
      '1', // default
    ],
    'opacity': [
      '0',    // 0
      '0.25', // 25
      '0.5',  // 50
      '0.75', // 75
      '1'     // 100
    ],
    'order': [
      '0', // none
      '1', // 1
      '2', // 2
      '3', // '3'
      '4', // '4'
      '5', // '5'
      '6', // '6'
      '7', // '7'
      '8', // '8'
      '9', // '9'
      '10', // '10'
      '11', // '11'
      '12', // '12'
      '-9999', //first
      '9999', // last
    ],
    'padding': [...spacing],
    'stroke': [
      'currentColor' // current
    ],
    'color': [...colors],
    'width': [
      ...spacing,
      'auto', // auto
      '50%', // '1/2'
      '33.333333%', // '1/3'
      '66.666667%', // '2/3'
      '25%', // '1/4'
      '50%', // '2/4'
      '75%', // '3/4'
      '20%', // '1/5'
      '40%', // '2/5'
      '60%', // '3/5'
      '80%', // '4/5'
      '16.666667%', // '1/6'
      '33.333333%', // '2/6'
      '50%', // '3/6'
      '66.666667%', // '4/6'
      '83.333333%', // '5/6'
      '8.333333%', // '1/12'
      '16.666667%', // '2/12'
      '25%', // '3/12'
      '33.333333%', // '4/12'
      '41.666667%', // '5/12'
      '50%', // '6/12'
      '58.333333%', // '7/12'
      '66.666667%', // '8/12'
      '75%', // '9/12'
      '83.333333%', // '10/12'
      '91.666667%', // '11/12'
      '100%', // full
      '100vw', // screen
    ],
    'z-index': [
      'auto', // auto
      '0',    //  0
      '10',   // 10
      '20',   // 20
      '30',   // 30
      '40',   // 40
      '50',   // 50
    ],
    'background-color': [...colors],
    'background-position': [
      '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
    ],
    'background-size': [
      'auto', // auto
      'cover',  // cover
      'contain',  // contain
    ]
  }
};