tailwind.config.js

const plugin = require('tailwindcss/plugin');
module.exports = {
  content: ['./index.html', './src/**/*.{html,js,svelte,ts}'],
  theme: {
    'flex-basis': (theme) => ({
      1: '100%',
      2: '50%',
      3: '33.333333%',
      4: '25%',
      5: '20%',
      6: '16.666666%',
      7: '14.285714%',
      0: '12.5%',
      'w-384': '384px',
      'w-336': '336px',
      'w-288': '288px',
      'w-240': '240px',
      'w-192': '192px',
      'w-144': '144px',
      'w-96': '96px',
      'w-48': '48px',
    }),
    flexGrow: {
      DEFAULT: 1,
      1: 1,
      2: 2,
      3: 3,
      4: 4,
      5: 5,
      6: 6,
      7: 7,
      8: 8,
    },
    colors: {
      black1: '#0E251D',
      black2: '#10141A',
      bronze1: '#F5C59F',
      bronze1inverse: '#0a3a60',
      bronze2: '#F7C19B',
      bronze2inverse: '#113D61',
      bronze3: '#ad937c',
      bronze4: '#353130',
      bronze4inverse: '#cacecf',
      blue1: '#0E8AD0',
      blue2: '#0557e8',
      blue3: '#6C93C7',
      blue4: '#0E8AD0',
      blue5: '#0557E8',
      green1: '#2ecc94',
      green2: '#3EB88E',
      green3: '#01FFD4',
      green4: '#42B792',
      green5: '#75FFD3',
      green6: '#01FFD4',
      green7: '#7eb79b',
      darkgreen1: '#1C2E31',
      darkgreen2: '#2B4246',
      darkgrey1: '#908486',
      grey1: '#282D3A',
      grey1inverse: '#D6D2C6',
      grey2: '#b2b4b6',
      grey3: '#232833',
      grey3inverse: '#dcd7cc',
      grey5: '#20242C',
      grey5inverse: '#DEDBD3',
      grey10: '#171B24',
      grey10inverse: '#E8E4DB',
      grey15: '#10151B',
      grey15inverse: '#efeae4',
      grey18: '#11161C',
      grey18inverse: '#eee9e3',
      grey20: '#10141A',
      grey20inverse: '#efebe5',
      grey30: '#0E1116',
      grey30inverse: '#F1EEE9',
      lightbronze1: '#FFDFC9',
      lightgrey1: '#b7b7b7',
      lightgrey1inverse: '#484848',
      lightgrey5: '#b0b0b0',
      lightgrey5inverse: '#4f4f4f',
      lightgrey10: '#979BA2',
      lightgrey10inverse: '#68645d',
      lightgrey20: '#4d5466',
      lightgrey20inverse: '#b2ab99',
      red1: '#fc4544',
      red2: '#220908',
      red3: '#DC1D1D',
      red4: '#471311',
      red5: '#931c18',
      orange1: '#ec8339',
      orange2: '#FE6A02',
      orange3: '#F4C19D',
      orange4: '#F5C09A',
      orange4inverse: '#103D61',
      white2: '#f5f5f5',
      white2inverse: '#0A0A0A',
      twitter: '#4CABFA',
      discord: '#7289DA',
      iconsInverse: '#252736',
      fantom: '#1969ff',
      ethereum: '#647fe5',
      arbitrum: '#93b4d5',
      optimism: '#ed3a2a',
    },
    fontFamily: {
      alcxLogo: ['Reem Kufi', 'sans-serif'],
      alcxTitles: ['neue-kabel', 'Josefin Sans', 'sans-serif'],
      alcxFlow: ['Montserrat', 'sans-serif'],
      alcxMono: ['monospace'],
    },
    extend: {
      backgroundSize: {
        'size-200': '200% 200%',
      },
      backgroundPosition: {
        'pos-0': '0% 0%',
        'pos-100': '100% 100%',
      },
    },
  },
  variants: {
    'flex-basis': ['responsive'],
    extend: {
      cursor: ['hover'],
      opacity: ['disabled'],
      block: ['group-hover'],
      backgroundPosition: ['hover'],
    },
  },
  plugins: [
    require('@tkh/tailwind-plugin-flex-basis')(),
    plugin(function ({ addVariant, e, postcss }) {
      addVariant('firefox', ({ container, seperator }) => {
        const isFirefoxRule = postcss.atRule({
          name: '-moz-document',
          params: 'url-prefix()',
        });
        isFirefoxRule.append(container.nodes);
        container.append(isFirefoxRule);
        isFirefoxRule.walkRules((rule) => {
          rule.selector = `.${e(`firefox${seperator}${rule.selector.slice(1)}`)}`;
        });
      });
    }),
  ],
  purge: false,
};