Configuration

📝 Configuration File

Create a bismillah.config.js file in the root of your project:

module.exports = {
  theme: {
    colors: {
      // Define custom colors
    },
    spacing: {
      // Define custom spacing scale
    },
    fontSize: {
      // Define custom font sizes
    },
    extend: {
      // Extend without overriding defaults
    }
  },
  variants: {
    // Configure which variants are generated
  },
  plugins: [
    // Add plugins
  ]
}

🎨 Theme Configuration

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: '#000000',
      white: '#ffffff',
      primary: '#4F46E5',
      secondary: '#10B981',
      danger: '#EF4444',
      warning: '#F59E0B',
      success: '#10B981',
      info: '#3B82F6',
      gray: {
        50: '#F9FAFB',
        100: '#F3F4F6',
        200: '#E5E7EB',
        300: '#D1D5DB',
        400: '#9CA3AF',
        500: '#6B7280',
        600: '#4B5563',
        700: '#374151',
        800: '#1F2937',
        900: '#111827'
      }
    }
  }
}

module.exports = {
  theme: {
    spacing: {
      '0': '0',
      '1': '0.25rem',    // 4px
      '2': '0.5rem',     // 8px
      '3': '0.75rem',    // 12px
      '4': '1rem',       // 16px
      '5': '1.25rem',    // 20px
      '6': '1.5rem',     // 24px
      '8': '2rem',       // 32px
      '10': '2.5rem',    // 40px
      '12': '3rem',      // 48px
      '16': '4rem',      // 64px
      '20': '5rem',      // 80px
      '24': '6rem',      // 96px
      '32': '8rem'       // 128px
    }
  }
}

module.exports = {
  theme: {
    fontSize: {
      'xs': ['0.75rem', '1rem'],
      'sm': ['0.875rem', '1.25rem'],
      'base': ['1rem', '1.5rem'],
      'lg': ['1.125rem', '1.75rem'],
      'xl': ['1.25rem', '1.75rem'],
      '2xl': ['1.5rem', '2rem'],
      '3xl': ['1.875rem', '2.25rem'],
      '4xl': ['2.25rem', '2.5rem'],
      '5xl': ['3rem', '1'],
      '6xl': ['3.75rem', '1'],
      '7xl': ['4.5rem', '1'],
      '8xl': ['6rem', '1'],
      '9xl': ['8rem', '1']
    }
  }
}

module.exports = {
  theme: {
    fontFamily: {
      sans: ['system-ui', 'system-ui-rounded', 'sans-serif'],
      serif: ['Georgia', 'serif'],
      mono: ['Menlo', 'Courier New', 'monospace']
    }
  }
}

module.exports = {
  theme: {
    borderRadius: {
      'none': '0',
      'sm': '0.125rem',
      'base': '0.25rem',
      'md': '0.375rem',
      'lg': '0.5rem',
      'xl': '0.75rem',
      '2xl': '1rem',
      '3xl': '1.5rem',
      'full': '9999px'
    }
  }
}

🔄 Extend vs Override

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#4F46E5',
        'brand-green': '#10B981'
      },
      spacing: {
        '128': '32rem',
        '144': '36rem'
      }
    }
  }
}

module.exports = {
  theme: {
    colors: {
      'brand-blue': '#4F46E5',
      'brand-green': '#10B981'
      // All default colors are now removed
    }
  }
}

🎯 Variants Configuration

Control which variants (responsive, hover, focus, etc.) are generated for each utility:

module.exports = {
  variants: {
    extend: {
      // Generate hover, focus, and active variants for backgroundColor
      backgroundColor: ['hover', 'focus', 'active', 'disabled'],
      // Generate dark mode variants for textColor
      textColor: ['dark', 'dark-hover'],
      // Add variants for border color
      borderColor: ['hover', 'focus', 'group-hover']
    }
  }
}

Common variants available:

🔌 Plugins

Add plugins to extend BismillahCSS functionality:

module.exports = {
  plugins: [
    require('@bismillah/typography'),
    require('@bismillah/forms'),
    require('@bismillah/line-clamp'),
    require('custom-plugin')
  ]
}

You can also create custom plugins:

const plugin = require('@bismillahcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, theme }) {
      const newUtilities = {
        '.outlined': {
          outline: '2px solid currentColor'
        },
        '.custom-shadow': {
          boxShadow: '0 10px 30px rgba(0, 0, 0, 0.1)'
        }
      }
      addUtilities(newUtilities)
    })
  ]
}

📄 Complete Example Configuration

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      white: '#ffffff',
      black: '#000000',
      primary: '#4F46E5',
      secondary: '#10B981',
      gray: {
        50: '#F9FAFB',
        100: '#F3F4F6',
        500: '#6B7280',
        900: '#111827'
      }
    },
    spacing: {
      '0': '0',
      '1': '0.25rem',
      '2': '0.5rem',
      '4': '1rem',
      '8': '2rem',
      '16': '4rem'
    },
    fontSize: {
      'sm': ['0.875rem', '1.25rem'],
      'base': ['1rem', '1.5rem'],
      'lg': ['1.125rem', '1.75rem'],
      'xl': ['1.25rem', '1.75rem']
    },
    fontFamily: {
      sans: ['system-ui', 'sans-serif'],
      mono: ['Menlo', 'monospace']
    },
    extend: {
      colors: {
        'brand-blue': '#0066FF'
      },
      spacing: {
        '128': '32rem'
      }
    }
  },
  variants: {
    extend: {
      backgroundColor: ['hover', 'focus'],
      textColor: ['hover', 'focus']
    }
  },
  plugins: []
}

💡 Tips & Best Practices

• Use extend: Most of the time you want to extend the default theme rather than override it.
• Organize colors: Structure your colors logically with semantic names (primary, secondary, danger, etc.).
• Consistent spacing: Use a consistent spacing scale throughout your project.
• Typography first: Define your font families and sizes early in your configuration.
• Test variants: Only include variants you actually use to reduce CSS output size.