I am struggling to achieve the desired style for this popup on hover example that I am adapting to a Vue (Nuxt) application utilizing Tailwind CSS. My suspicion is that the issue lies in how I am importing Mapbox's CSS file. However, I am uncertain about the correct import method or if it may be related to Tailwind. I have attempted importing in the following ways:
If I import like this:
<style scoped>
@import "mapbox-gl/dist/mapbox-gl.css";
</style>
The map appears like this: https://i.sstatic.net/6mjFu.png
If I import as follows:
import mapboxgl from "mapbox-gl";
import 'mapbox-gl/dist/mapbox-gl.css';
The map does not display at all.
Lastly, without importing any of Mapbox's CSS:
https://i.sstatic.net/AsDa8.png
This is my map component:
<template>
<div>
<div id="map" class="w-full h-full"></div>
</div>
</template>
<script>
import mapboxgl from "mapbox-gl";
export default {
data() {
return {
access_token:
"pk.eyJ1Ijoic2FtcGFvbGl0byIsImEiOiJja3c1Z2g1anowZ3Y1MnRwOGtieWRkdjNkIn0.wkW06MEvxRmyL3jfZYBTWA",
};
},
mounted() {
this.createMap();
},
methods: {
createMap() {
mapboxgl.accessToken = this.access_token;
const map = new mapboxgl.Map({
container: "map",
style: 'mapbox://styles/mapbox/streets-v11',
center: [-77.04, 38.907],
zoom: 11.15
});
// Additional code for mapping features and popups
// Add a layer showing the places.
// Create a popup.
// Event listeners for hovering over places on the map.
},
},
};
</script>
<style scoped>
/*
@import "mapbox-gl/dist/mapbox-gl.css";
*/
</style>