tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    screens: {
      xs: { max: '379px' },
      sm: { min: '380px', max: '639px' },
      md: { min: '640px', max: '767px' },
      lg: { min: '768px', max: '1023px' },
      xl: { min: '1024px', max: '1279px' },
      '2xl': { min: '1280px' },
    },
    extend: {},
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      white: '#FFFFFF',
      black: '#000000',
      primary: '#FF6C3E',
      primaryBg: '#FFE2D8',
      primary20: 'rgba(255, 108, 62, 0.2)',
      primary10: 'rgba(255, 108, 62, 0.1)',
      primaryLight: '#FF9D7E',
      textGray: '#6F6F6F',
      textGray2: '#737373',
      textGray3: '#999999',
      textGray4: '#666666',
      dividerGray: '#E6E6E6',
      disabledTextGray: '#B9B9B9',
      modalBackground: 'rgba(0, 0, 0, 0.5)',
      invalidGray: '#F7F7F7',
      invalidTextGray: '#B9B9B9',
      defaultTextGray: '#D0D0D0',
      subGray: '#D9D9D9',
      subGrayText: '#ABABAB',
      cardBg: '#F4F4F4',
      cardText: '#B0B0B0',
      keywordBg: '#FFE9B5',
      keywordTagBorder: '#E5E5E5',
      buttonContainerBorder: '#EEEEEE',

      bottomGray1: '#EEEEEE',
      bottomGray2: '#CFD6DB',
      bottomGray3: '#28303F',
      grayScale1: '#F7F7F7',
      grayScale2: '#E5E5E5',
      grayScale3: '#CCCCCC',
      grayScale4: '#999999',
      grayScale5: '#666666',
      grayScale6: '#333333',
    },
  },
  plugins: [require('tailwind-scrollbar-hide')],
};