tailwind.config.js

/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin')

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './xmtp/**/*.{js,ts,jsx,tsx}',
  ],
  safelist: [
    {
      pattern: /bg-([a-z]+)-(100|200|300|400|600)/,
    },
  ],
  darkMode: ['class'],
  theme: {
    extend: {
      scale: {
        500: '5',
        300: '3',
      },
      animation: {
        'spin-bezier': 'myspin 1s cubic-bezier(0.9, 0.26, 0.97, 1) infinite',
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
        myspin: {
          from: { transform: 'rotate(0deg)' },
          to: { transform: 'rotate(360deg)' },
        },
      },
      colors: {
        blocqpurple: '#B88DFF',
        neonPurple: 'rgba(111,76,255,1.0)',
        navy: '#0b3a53',
        'navy-muted': '#244e66',
        aqua: '#69c4cd',
        'aqua-muted': '#9ad4db',
        ipfsgray: '#b7bbc8',
        'ipfsgray-muted': '#d9dbe2',
        charcoal: '#34373f',
        'charcoal-muted': '#7f8491',
        ipfsred: '#ea5037',
        'ipfsred-muted': '#f36149',
        ipfsyellow: '#f39021',
        'ipfsyellow-muted': '#f9a13e',
        ipfsteal: '#378085',
        'ipfsteal-muted': '#439a9d',
        ipfsgreen: '#0cb892',
        'ipfsgreen-muted': '#0aca9f',
        snow: '#edf0f4',
        'snow-muted': '#f7f8fa',
        link: '#117eb3',
        'washed-blue': '#F0F6FA',
      },
      backgroundImage: {
        'mybg-light': 'linear-gradient(170deg, #edf0f4, 90%, #B88DFF)',
        'mybg-dark': 'linear-gradient(170deg, #11002D, 90%, #270067)',
        'hero-pattern': 'url("/hero.svg")',
        'logo-black':
          'url("/blocqBookLogo/icon/blocqbookTextTransparentBanner.png")',
        'logo-indigo':
          'url("/blocqBookLogo/icon/blocqbookTextTransparentBannerLight.png")',
        'catch-phrase': 'url("/blocqBookLogo/text/blocqbookTextonlyTrans.png")',
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms'),
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
          /* IE and Edge */
          '-ms-overflow-style': 'none',

          /* Firefox */
          'scrollbar-width': 'none',

          /* Safari and Chrome */
          '&::-webkit-scrollbar': {
            display: 'none',
          },
        },
      })
    }),
    plugin(function ({ addComponents }) {
      addComponents({})
    }),
  ],
}