JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.23.0/phaser.min.js"></script>

JavaScript

var config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload() 
{
    this.load.bitmapFont('hyper', 'https://labs.phaser.io/assets/fonts/bitmap/hyperdrive.png', 'https://labs.phaser.io/assets/fonts/bitmap/hyperdrive.xml');
}

function create() 
{
	  // setScale AFTER setInteractive
    var text1 = this.add.bitmapText(50, 50, 'hyper', 'Text 1', 96);
    text1.setInteractive({useHandCursor: true});
    text1.setScale(0.5);
    this.input.enableDebug(text1);
  
  	// setScale BEFORE setInteractive
    var text2 = this.add.bitmapText(50, 150, 'hyper', 'Text 2', 96);
    text2.setScale(0.5);
    text2.setInteractive({useHandCursor: true});
    this.input.enableDebug(text2);
    
    // hitArea = getTextBounds + Phaser.Geom.Rectangle
    var text3 = this.add.bitmapText(300, 50, 'hyper', 'Text 3', 96);
    text3.setScale(0.5);
    var bounds3 = text3.getTextBounds();
    var myHitArea = new Phaser.Geom.Rectangle(0, 0, bounds3.global.width, bounds3.global.height);
    text3.setInteractive({useHandCursor: true, hitArea: myHitArea});
    this.input.enableDebug(text3);
    
    // hitArea = getTextBounds + input.hitArea.setTo
    var text4 = this.add.bitmapText(300, 150, 'hyper', 'Text 4', 96);
    text4.setScale(0.5);
    text4.setInteractive({useHandCursor: true});
    var bounds4 = text4.getTextBounds();
    text4.input.hitArea.setTo(0, 0, bounds4.global.width, bounds4.global.height);
    this.input.enableDebug(text4);
}