JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.js"></script>
<canvas id='pixi' width="300" height="300"></canvas>

JavaScript

// Shaders
const fragShader = `precision mediump float;
uniform vec4 u_color;

void main() {
	gl_FragColor = u_color;
}
`;
const vertShader = `attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat3 projectionMatrix;
uniform mat3 worldMatrix;

varying vec2 vTextureCoord;

void main(void) {
	gl_Position = vec4((projectionMatrix * worldMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
	vTextureCoord = aTextureCoord;
}`;

// PIXI GlyphShader
class GlyphShader extends PIXI.Shader {
	constructor(gl) {
		super(gl, vertShader, fragShader);
		
		this._setInitialUniforms();
	}
	
	_setInitialUniforms() {
		this.bind();
		this.uniforms.u_color = new Float32Array([1.0, 1.0, 1.0, 1.0])
	}
}

// Glyph Renderer
class GlyphRenderer extends PIXI.ObjectRenderer {
	
	constructor(renderer){
  	super(renderer);
  	this._instances = [];
  	this._currentIndex = 0;
  	this._tempColor = new Float32Array();
  }
	
	onContextChange() {
		let gl = this.renderer.gl;
		this.glyphShader = new GlyphShader(gl);
		this._tempColor =  new Float32Array(4);
	}
	
	render(glyphText) {
		this._instances[this._currentIndex++] = glyphText;
	}
	
	flush(){
		const renderer = this.renderer;
		const shader = this.glyphShader;
		const glCore = PIXI.glCore;
    renderer.bindShader(shader);
		
		this._instances.forEach((glyphText, idx) => {
			renderer.state.setBlendMode(glyphText.blendMode);
			
			// Create VAO each tick for simplicity for this example.
			renderer.bindVao(null);
			const vaoData = {
				shader: this.glyphShader,
				indexBuffer: glCore.GLBuffer.createIndexBuffer(renderer.gl, glyphText.glyphIndexData, renderer.gl.STREAM_DRAW),
				vertexBuffer: glCore.GLBuffer.createVertexBuffer(renderer.gl, glyphText.glyphVertexData, renderer.gl.STATIC_DRAW),
				vao: null
			};
			vaoData.vao = new...