JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.9.1/mapbox-gl.js"></script>
<div id="map"></div>

CSS

#map {
  width: 100%;
  height: 100vh;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoibjhtbHIiLCJhIjoiY2pxdGxqeTBmMGF5bjQycmM4bm1md2YyZyJ9.UF03MZ6WbNQFAcHN_ohgew';
const map = new mapboxgl.Map({
    container: 'map',
    style: {
        version: 8,
        center: [-122, 47],
        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
        zoom: 16,
        sources: {
            line: {
                type: 'geojson',
                data: {
                    type: 'FeatureCollection',
                    features: [{
                        type: 'Feature',
                        geometry: {
                            type: 'LineString',
                            coordinates: [[-122, 47], [-122.001, 47.001]]
                        },
                        properties: {}
                    }]
                }
            }
        },
        layers: [{
            id: 'line',
            type: 'line',
            source: 'line'
        }, {
            id: 'text',
            type: 'symbol',
            source: 'line',
            layout: {
                'symbol-placement': 'line-center',
                'text-field': 'text'
            }
        }]
    }
}).on('zoomend', () => console.log(map.getZoom()));