tailwind.config.js

module.exports = {
   title: 'hello',
   // purge: [],
   target: 'relaxed',
   mode: 'jit',
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
   prefix: '',
   important: false,
   presets: [require('@ib/nebula-system/tailwind')],
   separator: ':',
   theme: {
      screens: {
         sm: '640px',
         md: '768px',
         lg: '1024px',
         xl: '1280px'
      },

      colors: {
         transparent: 'transparent',
         current: 'currentColor',
         customColor: 'red',
         black: '#000',
         white: '#fff',

         gray: {
            100: '#f7fafc',
            200: '#edf2f7',
            300: '#e2e8f0',
            400: '#cbd5e0',
            500: '#a0aec0',
            600: '#718096',
            700: '#4a5568',
            800: '#2d3748',
            900: '#1a202c'
         },
         red: {
            100: '#fff5f5',
            200: '#fed7d7',
            300: '#feb2b2',
            400: '#fc8181',
            500: '#f56565',
            600: '#e53e3e',
            700: '#c53030',
            800: '#9b2c2c',
            900: '#742a2a'
         },
         orange: {
            100: '#fffaf0',
            200: '#feebc8',
            300: '#fbd38d',
            400: '#f6ad55',
            500: '#ed8936',
            600: '#dd6b20',
            700: '#c05621',
            800: '#9c4221',
            900: '#7b341e'
         },
         yellow: {
            100: '#fffff0',
            200: '#fefcbf',
            300: '#faf089',
            400: '#f6e05e',
            500: '#ecc94b',
            600: '#d69e2e',
            700: '#b7791f',
            800: '#975a16',
            900: '#744210'
         },
         green: {
            100: '#f0fff4',
            200: '#c6f6d5',
            300: '#9ae6b4',
            400: '#68d391',
            500: '#6b46c1',
            600: '#38a169',
            700: '#2f855a',
            800: '#276749',
            900: '#22543d'
         },
         teal: {
            100: '#e6fffa',
            200: '#b2f5ea',
            300: '#81e6d9',
            400: '#4fd1c5',
            500: '#38b2ac',
            600: '#319795',
            700: '#2c7a7b',
            800: '#285e61',
            900: '#234e52'
         },
         blue: {
            100: '#ebf8ff',
            200: '#bee3f8',
            300: '#90cdf4',
            400: '#63b3ed',
            500: '#4299e1',
            600: '#3182ce',
            700: '#2b6cb0',
            800: '#2c5282',
            900: '#2a4365'
         },
         indigo: {
            100: '#ebf4ff',
            200: '#c3dafe',
            300: '#a3bffa',
            400: '#7f9cf5',
            500: '#667eea',
            600: '#5a67d8',
            700: '#4c51bf',
            800: '#434190',
            900: '#3c366b'
         },
         purple: {
            100: '#faf5ff',
            200: '#e9d8fd',
            300: '#d6bcfa',
            400: '#b794f4',
            500: '#9f7aea',
            600: '#805ad5',
            700: '#6b46c1',
            800: '#553c9a',
            900: '#44337a'
         },
         pink: {
            100: '#fff5f7',
            200: '#fed7e2',
            300: '#fbb6ce',
            400: '#f687b3',
            500: '#ed64a6',
            600: '#d53f8c',
            700: '#b83280',
            800: '#97266d',
            900: '#702459'
         }
      },

      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',
         '20': '5rem',
         '24': '6rem',
         '32': '8rem',
         '40': '10rem',
         '48': '12rem',
         '56': '14rem',
         '64': '16rem'
      },
      backgroundColor: theme => theme('colors'),
      backgroundOpacity: theme => theme('opacity'),
      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'
      },
      borderColor: theme => ({
         ...theme('colors'),
         default: theme('colors.gray.300', 'currentColor')
      }),
      borderOpacity: theme => theme('opacity'),
      borderRadius: {
         none: '0',
         sm: '0.125rem',
         default: '0.25rem',
         md: '0.375rem',
         lg: '0.5rem',
         full: '9999px'
      },
      borderWidth: {
         default: '1px',
         '0': '0',
         '2': '2px',
         '4': '4px',
         '8': '8px'
      },
      boxShadow: {
         xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
         sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
         default:
            '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
         md:
            '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
         lg:
            '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
         xl:
            '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
         '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
         inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
         outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
         none: 'none'
      },
      container: {},
      cursor: {
         auto: 'auto',
         default: 'default',
         pointer: 'pointer',
         wait: 'wait',
         text: 'text',
         move: 'move',
         'not-allowed': 'not-allowed'
      },
      divideColor: theme => theme('borderColor'),
      divideOpacity: theme => theme('borderOpacity'),
      divideWidth: theme => theme('borderWidth'),
      fill: {
         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'
      },
      fontFamily: {
         sans: [
            'system-ui',
            '-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: '0.75rem',
         sm: '0.875rem',
         base: '1rem',
         lg: '1.125rem',
         xl: '1.25rem',
         '2xl': '1.5rem',
         '3xl': '1.875rem',
         '4xl': '2.25rem',
         '5xl': '3rem',
         '6xl': '4rem'
      },
      fontWeight: {
         hairline: '100',
         thin: '200',
         light: '300',
         normal: '400',
         medium: '500',
         semibold: '600',
         bold: '700',
         extrabold: '800',
         black: '900'
      },
      height: theme => ({
         auto: 'auto',
         ...theme('spacing'),
         full: '100%',
         screen: '100vh'
      }),
      inset: {
         '0': '0',
         auto: 'auto'
      },
      letterSpacing: {
         tighter: '-0.05em',
         tight: '-0.025em',
         normal: '0',
         wide: '0.025em',
         wider: '0.05em',
         widest: '0.1em'
      },
      lineHeight: {
         none: '1',
         tight: '1.25',
         snug: '1.375',
         normal: '1.5',
         relaxed: '1.625',
         loose: '2',
         '3': '.75rem',
         '4': '1rem',
         '5': '1.25rem',
         '6': '1.5rem',
         '7': '1.75rem',
         '8': '2rem',
         '9': '2.25rem',
         '10': '2.5rem'
      },
      listStyleType: {
         none: 'none',
         disc: 'disc',
         decimal: 'decimal'
      },
      margin: (theme, { negative }) => ({
         auto: 'auto',
         ...theme('spacing'),
         ...negative(theme('spacing'))
      }),
      maxHeight: {
         full: '100%',
         screen: '100vh'
      },
      maxWidth: (theme, { breakpoints }) => ({
         none: 'none',
         xs: '20rem',
         sm: '24rem',
         md: '28rem',
         lg: '32rem',
         xl: '36rem',
         '2xl': '42rem',
         '3xl': '48rem',
         '4xl': '56rem',
         '5xl': '64rem',
         '6xl': '72rem',
         full: '100%',
         ...breakpoints(theme('screens'))
      }),
      minHeight: {
         '0': '0',
         full: '100%',
         screen: '100vh'
      },
      minWidth: {
         '0': '0',
         full: '100%'
      },
      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'
      },
      opacity: {
         '0': '0',
         '25': '0.25',
         '50': '0.5',
         '75': '0.75',
         '100': '1'
      },
      order: {
         first: '-9999',
         last: '9999',
         none: '0',
         '1': '1',
         '2': '2',
         '3': '3',
         '4': '4',
         '5': '5',
         '6': '6',
         '7': '7',
         '8': '8',
         '9': '9',
         '10': '10',
         '11': '11',
         '12': '12'
      },
      padding: theme => theme('spacing'),
      placeholderColor: theme => theme('colors'),
      placeholderOpacity: theme => theme('opacity'),
      space: (theme, { negative }) => ({
         ...theme('spacing'),
         ...negative(theme('spacing'))
      }),
      stroke: {
         current: 'currentColor'
      },
      strokeWidth: {
         '0': '0',
         '1': '1',
         '2': '2'
      },
      textColor: theme => theme('colors'),
      textOpacity: theme => theme('opacity'),
      width: theme => ({
         auto: 'auto',
         ...theme('spacing'),
         '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'
      }),
      zIndex: {
         auto: 'auto',
         '0': '0',
         '10': '10',
         '20': '20',
         '30': '30',
         '40': '40',
         '50': '50'
      },
      gap: theme => theme('spacing'),
      gridTemplateColumns: {
         none: 'none',
         '1': 'repeat(1, minmax(0, 1fr))',
         '2': 'repeat(2, minmax(0, 1fr))',
         '3': 'repeat(3, minmax(0, 1fr))',
         '4': 'repeat(4, minmax(0, 1fr))',
         '5': 'repeat(5, minmax(0, 1fr))',
         '6': 'repeat(6, minmax(0, 1fr))',
         '7': 'repeat(7, minmax(0, 1fr))',
         '8': 'repeat(8, minmax(0, 1fr))',
         '9': 'repeat(9, minmax(0, 1fr))',
         '10': 'repeat(10, minmax(0, 1fr))',
         '11': 'repeat(11, minmax(0, 1fr))',
         '12': 'repeat(12, minmax(0, 1fr))'
      },
      gridColumn: {
         auto: 'auto',
         'span-1': 'span 1 / span 1',
         'span-2': 'span 2 / span 2',
         'span-3': 'span 3 / span 3',
         'span-4': 'span 4 / span 4',
         'span-5': 'span 5 / span 5',
         'span-6': 'span 6 / span 6',
         'span-7': 'span 7 / span 7',
         'span-8': 'span 8 / span 8',
         'span-9': 'span 9 / span 9',
         'span-10': 'span 10 / span 10',
         'span-11': 'span 11 / span 11',
         'span-12': 'span 12 / span 12'
      },
      gridColumnStart: {
         auto: 'auto',
         '1': '1',
         '2': '2',
         '3': '3',
         '4': '4',
         '5': '5',
         '6': '6',
         '7': '7',
         '8': '8',
         '9': '9',
         '10': '10',
         '11': '11',
         '12': '12',
         '13': '13'
      },
      gridColumnEnd: {
         auto: 'auto',
         '1': '1',
         '2': '2',
         '3': '3',
         '4': '4',
         '5': '5',
         '6': '6',
         '7': '7',
         '8': '8',
         '9': '9',
         '10': '10',
         '11': '11',
         '12': '12',
         '13': '13'
      },
      gridTemplateRows: {
         none: 'none',
         '1': 'repeat(1, minmax(0, 1fr))',
         '2': 'repeat(2, minmax(0, 1fr))',
         '3': 'repeat(3, minmax(0, 1fr))',
         '4': 'repeat(4, minmax(0, 1fr))',
         '5': 'repeat(5, minmax(0, 1fr))',
         '6': 'repeat(6, minmax(0, 1fr))'
      },
      gridRow: {
         auto: 'auto',
         'span-1': 'span 1 / span 1',
         'span-2': 'span 2 / span 2',
         'span-3': 'span 3 / span 3',
         'span-4': 'span 4 / span 4',
         'span-5': 'span 5 / span 5',
         'span-6': 'span 6 / span 6'
      },
      gridRowStart: {
         auto: 'auto',
         '1': '1',
         '2': '2',
         '3': '3',
         '4': '4',
         '5': '5',
         '6': '6',
         '7': '7'
      },
      gridRowEnd: {
         auto: 'auto',
         '1': '1',
         '2': '2',
         '3': '3',
         '4': '4',
         '5': '5',
         '6': '6',
         '7': '7'
      },
      transformOrigin: {
         center: 'center',
         top: 'top',
         'top-right': 'top right',
         right: 'right',
         'bottom-right': 'bottom right',
         bottom: 'bottom',
         'bottom-left': 'bottom left',
         left: 'left',
         'top-left': 'top left'
      },
      scale: {
         '0': '0',
         '50': '.5',
         '75': '.75',
         '90': '.9',
         '95': '.95',
         '100': '1',
         '105': '1.05',
         '110': '1.1',
         '125': '1.25',
         '150': '1.5'
      },
      rotate: {
         '-180': '-180deg',
         '-90': '-90deg',
         '-45': '-45deg',
         '0': '0',
         '45': '45deg',
         '90': '90deg',
         '180': '180deg'
      },
      translate: (theme, { negative }) => ({
         ...theme('spacing'),
         ...negative(theme('spacing')),
         '-full': '-100%',
         '-1/2': '-50%',
         '1/2': '50%',
         full: '100%'
      }),
      skew: {
         '-12': '-12deg',
         '-6': '-6deg',
         '-3': '-3deg',
         '0': '0',
         '3': '3deg',
         '6': '6deg',
         '12': '12deg'
      },
      transitionProperty: {
         none: 'none',
         all: 'all',
         default:
            'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
         colors: 'background-color, border-color, color, fill, stroke',
         opacity: 'opacity',
         shadow: 'box-shadow',
         transform: 'transform'
      },
      transitionTimingFunction: {
         linear: 'linear',
         in: 'cubic-bezier(0.4, 0, 1, 1)',
         out: 'cubic-bezier(0, 0, 0.2, 1)',
         'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)'
      },
      transitionDuration: {
         '75': '75ms',
         '100': '100ms',
         '150': '150ms',
         '200': '200ms',
         '300': '300ms',
         '500': '500ms',
         '700': '700ms',
         '1000': '1000ms'
      },
      transitionDelay: {
         '75': '75ms',
         '100': '100ms',
         '150': '150ms',
         '200': '200ms',
         '300': '300ms',
         '500': '500ms',
         '700': '700ms',
         '1000': '1000ms'
      }
   },
   variants: {
      accessibility: ['responsive', 'focus'],
      alignContent: ['responsive'],
      alignItems: ['responsive'],
      alignSelf: ['responsive'],
      appearance: ['responsive'],
      backgroundAttachment: ['responsive'],
      backgroundColor: ['responsive', 'hover', 'focus'],
      backgroundOpacity: ['responsive', 'hover', 'focus'],
      backgroundPosition: ['responsive'],
      backgroundRepeat: ['responsive'],
      backgroundSize: ['responsive'],
      borderCollapse: ['responsive'],
      borderColor: ['responsive', 'hover', 'focus'],
      borderOpacity: ['responsive', 'hover', 'focus'],
      borderRadius: ['responsive'],
      borderStyle: ['responsive'],
      borderWidth: ['responsive'],
      boxShadow: ['responsive', 'hover', 'focus'],
      boxSizing: ['responsive'],
      cursor: ['responsive'],
      display: ['responsive'],
      divideColor: ['responsive'],
      divideOpacity: ['responsive'],
      divideWidth: ['responsive'],
      fill: ['responsive'],
      flex: ['responsive'],
      flexDirection: ['responsive'],
      flexGrow: ['responsive'],
      flexShrink: ['responsive'],
      flexWrap: ['responsive'],
      float: ['responsive'],
      clear: ['responsive'],
      fontFamily: ['responsive'],
      fontSize: ['responsive'],
      fontSmoothing: ['responsive'],
      fontStyle: ['responsive'],
      fontWeight: ['responsive', 'hover', 'focus'],
      height: ['responsive'],
      inset: ['responsive'],
      justifyContent: ['responsive'],
      letterSpacing: ['responsive'],
      lineHeight: ['responsive'],
      listStylePosition: ['responsive'],
      listStyleType: ['responsive'],
      margin: ['responsive'],
      maxHeight: ['responsive'],
      maxWidth: ['responsive'],
      minHeight: ['responsive'],
      minWidth: ['responsive'],
      objectFit: ['responsive'],
      objectPosition: ['responsive'],
      opacity: ['responsive', 'hover', 'focus'],
      order: ['responsive'],
      outline: ['responsive', 'focus'],
      overflow: ['responsive'],
      padding: ['responsive'],
      placeholderColor: ['responsive', 'focus'],
      placeholderOpacity: ['responsive', 'focus'],
      pointerEvents: ['responsive'],
      position: ['responsive'],
      resize: ['responsive'],
      space: ['responsive'],
      stroke: ['responsive'],
      strokeWidth: ['responsive'],
      tableLayout: ['responsive'],
      textAlign: ['responsive'],
      textColor: ['responsive', 'hover', 'focus'],
      textOpacity: ['responsive', 'hover', 'focus'],
      textDecoration: ['responsive', 'hover', 'focus'],
      textTransform: ['responsive'],
      userSelect: ['responsive'],
      verticalAlign: ['responsive'],
      visibility: ['responsive'],
      whitespace: ['responsive'],
      width: ['responsive'],
      wordBreak: ['responsive'],
      zIndex: ['responsive'],
      gap: ['responsive'],
      gridAutoFlow: ['responsive'],
      gridTemplateColumns: ['responsive'],
      gridColumn: ['responsive'],
      gridColumnStart: ['responsive'],
      gridColumnEnd: ['responsive'],
      gridTemplateRows: ['responsive'],
      gridRow: ['responsive'],
      gridRowStart: ['responsive'],
      gridRowEnd: ['responsive'],
      transform: ['responsive'],
      transformOrigin: ['responsive'],
      scale: ['responsive', 'hover', 'focus'],
      rotate: ['responsive', 'hover', 'focus'],
      translate: ['responsive', 'hover', 'focus'],
      skew: ['responsive', 'hover', 'focus'],
      transitionProperty: ['responsive'],
      transitionTimingFunction: ['responsive'],
      transitionDuration: ['responsive'],
      transitionDelay: ['responsive']
   },
   corePlugins: {},
   plugins: []
}