@randstad-design/orbit-multitheme/tailwind.config.js

multitheme Front-end code based on Randstad Human Forward components

const cmd = process.argv[2];

const path = cmd.substring(0, cmd.lastIndexOf('/'));
const tokens = path + '/tokens';

const colors = require(`./${tokens}/colors`);
const textColors = require(`./${tokens}/textColors`);
const fontSizes = require(`./${tokens}/fontSizes`);

module.exports = {
  purge: [],
  important: true,
  darkMode: false, // or 'media' or 'class'
  corePlugins: [
    'margin',
    'padding',
    'backgroundColor',
    'backgroundPosition',
    'borderRadius',
    'position',
    'fill',
    'flex',
    'flexDirection',
    'flexWrap',
    'flexGrow',
    'flexShrink',
    'fontSize',
    'gap',
    'height',
    'order',
    'overflow',
    'gridTemplateColumns',
    'gridColumn',
    'gridColumnEnd',
    'gridColumnStart',
    'transitionProperty',
    'transitionDuration',
    'textColor',
    'width',
    'textAlign',
    'textTransform',
    'justifyContent',
    'justifyItems',
    'justifySelf',
    'alignContent',
    'alignItems',
    'alignSelf',
    'placeContent',
    'placeItems',
    'placeSelf'
  ],
  theme: {
    screens: {
      s: '375px',
      m: '501px',
      l: '941px',
      xl: '1281px',
      xxl: '1441px'
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      ...colors
    },
    gap: {
      0: '0'
    },
    spacing: {
      none: '0rem',
      xxs: '0.2778rem',
      xs: '0.5556rem',
      s: '1.111rem',
      m: '1.667rem',
      l: '2.778rem',
      xl: '4.444rem',
      xxl: '7.222rem'
    },
    width: {
      auto: 'auto',
      '1/2': '50%',
      '1/3': '33.333333%',
      '2/3': '66.666667%',
      '1/4': '25%',
      '2/4': '50%',
      '3/4': '75%',
      '1/5': '20%',
      '2/5': '40%',
      '3/5': '60%',
      '4/5': '80%',
      '1/6': '16.666667%',
      '2/6': '33.333333%',
      '3/6': '50%',
      '4/6': '66.666667%',
      '5/6': '83.333333%',
      '1/12': '8.333333%',
      '2/12': '16.666667%',
      '3/12': '25%',
      '4/12': '33.333333%',
      '5/12': '41.666667%',
      '6/12': '50%',
      '7/12': '58.333333%',
      '8/12': '66.666667%',
      '9/12': '75%',
      '10/12': '83.333333%',
      '11/12': '91.666667%',
      full: '100%',
      screen: '100vw',
      min: 'min-content',
      max: 'max-content'
    },
    borderRadius: {
      DEFAULT: '4px',
      xs: '2px',
      s: '3px',
      m: '5px',
      l: '6px',
      xl: '8px',
      xxl: '20px',
      max: '30px'
    },
    textColor: textColors,
    // prettier-ignore
    fontSize: {...fontSizes }
  },
  variants: {
    backgroundColor: [],
    gap: ['responsive'],
    position: [],
    width: ['responsive'],
    textColor: [],
    transitionDuration: [],
    transitionProperty: [],
    flex: [],
    textTransform: []
  },
  plugins: []
};