Merge branch 'feat/use-tw-prefix' into 'main'

feat: use tw prefix option See merge request software/fabcity-map-package!2

Merge branch 'feat/use-tw-prefix' into 'main'
feat: use tw prefix option See merge request software/fabcity-map-package!2
3cca29d1 · Moritz Stückler · 146ab19d · f2bff304 · 3cca29d1 · 3cca29d1
Commit 3cca29d1 authored 2 years ago by Moritz Stückler
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
-<html lang="en" class="h-full w-full">
+<html lang="en" class="fcmap-h-full fcmap-w-full">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Fab City Hamburg Map</title>
  </head>
-  <body class="h-full w-full">
+  <body class="fcmap-h-full fcmap-w-full">
-    <div id="app" class="h-full w-full bg-slate-500"></div>
+    <div id="app" class="fcmap-h-full fcmap-w-full fcmap-bg-slate-500"></div>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script type="module" src="./src/index.tsx"></script>
  </body>

--- a/src/components/CreatableSelect.tsx
+++ b/src/components/CreatableSelect.tsx
@@ -32,7 +32,7 @@ const CreatableSelect = <OptionType, isMulti extends boolean>(props: NamedProps<
        })}
        styles={customStyles}
        name="pois"
-        className="hover:border-opacity-40 rounded-lg w-full border-2 border-black border-opacity-20 focus-within:border-indigo-300 focus-within:ring focus-within:ring-indigo-200 focus-within:ring-opacity-50 mt-1"
+        className="hover:fcmap-border-opacity-40 fcmap-rounded-lg fcmap-w-full fcmap-border-2 fcmap-border-black fcmap-border-opacity-20 focus-within:fcmap-border-indigo-300 focus-within:fcmap-ring focus-within:fcmap-ring-indigo-200 focus-within:fcmap-ring-opacity-50 fcmap-mt-1"
        {...props}
      />
    </div>

--- a/src/components/ErrorModal.tsx
+++ b/src/components/ErrorModal.tsx
@@ -5,7 +5,7 @@ import Modal from './Modal';
 const ErrorModal: React.FC = () => {
  const error = useStore((state) => state.error);
  const icons: { [index: string]: JSX.Element } = {
-    alert: <AlertIcon className="h-6 w-6 text-red-600" />,
+    alert: <AlertIcon className="fcmap-h-6 fcmap-w-6 fcmap-text-red-600" />,
  };
  return error && <Modal title={error.title} text={error.message} icon={icons[error.icon]} />;
 };

--- a/src/components/FabCityMap.tsx
+++ b/src/components/FabCityMap.tsx
@@ -30,7 +30,7 @@ const FabCityMap: React.FC<Props> = ({ data, mapboxToken, className }) => {
      <Router>
        <ErrorModal />
        <Notification />
-        <div className={`flex md:flex-row-reverse flex-col h-full bg-white ${className || ''}`}>
+        <div className={`fcmap-flex md:fcmap-flex-row-reverse fcmap-flex-col fcmap-h-full fcmap-bg-white ${className || ''}`}>
          <Route path="/">
            <Map mapboxToken={mapboxToken} />
          </Route>

--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
 import type React from 'react';
 import { useEffect } from 'react';
 import { useStore, useFilteredPoiData } from '../../hooks';
-import Map, { Marker, useMap, AttributionControl } from 'react-map-gl';
+import ReactMapGl, { Marker, useMap, AttributionControl } from 'react-map-gl';
 import { useHistory } from 'react-router-dom';
 import MapLayerControl from './MapLayerControl';
 import 'mapbox-gl/dist/mapbox-gl.css';
@@ -25,7 +25,7 @@ const MarkerSvg: React.FC<MarkerProps> = ({ className }) => {
  );
 };
-export const MapGl: React.FC<Props> = ({ mapboxToken }) => {
+const Map: React.FC<Props> = ({ mapboxToken }) => {
  const history = useHistory();
  const data = useStore((state) => state.poiData);
  const selectedPoi = useStore((state) => state.selectedPoi);
@@ -39,7 +39,7 @@ export const MapGl: React.FC<Props> = ({ mapboxToken }) => {
  }, [selectedPoi]);
  return (
-    <Map
+    <ReactMapGl
      initialViewState={{
        latitude: DEFAULT_CENTER[1],
        longitude: DEFAULT_CENTER[0],
@@ -52,11 +52,11 @@ export const MapGl: React.FC<Props> = ({ mapboxToken }) => {
      id="fcmap"
      attributionControl={false}
    >
-      <AttributionControl position='top-right' />
+      <AttributionControl position="top-right" />
      <MapLayerControl />
      {selectedPoi ? (
        <Marker key={selectedPoi.id} longitude={selectedPoi.lng} latitude={selectedPoi.lat} anchor="bottom">
-          <MarkerSvg className="w-8 h-8 opacity-100 scale-125 text-fabcity-red" />
+          <MarkerSvg className="fcmap-w-8 fcmap-h-8 fcmap-opacity-100 fcmap-scale-125 fcmap-text-fabcity-red" />
        </Marker>
      ) : (
        (filteredData || data)?.map((poi) => {
@@ -72,16 +72,16 @@ export const MapGl: React.FC<Props> = ({ mapboxToken }) => {
              }}
            >
              <MarkerSvg
-                className={`transition ease-in-out w-8 h-8 hover:scale-125 opacity-70 hover:opacity-100 hover:cursor-pointer text-fabcity-red ${
+                className={`fcmap-transition fcmap-ease-in-out fcmap-w-8 fcmap-h-8 hover:fcmap-scale-125 fcmap-opacity-70 hover:fcmap-opacity-100 hover:fcmap-cursor-pointer fcmap-text-fabcity-red ${
-                  isHovered ? 'scale-125 opacity-100' : ''
+                  isHovered ? 'fcmap-scale-125 fcmap-opacity-100' : ''
                }`}
              />
            </Marker>
          );
        })
      )}
-    </Map>
+    </ReactMapGl>
  );
 };
-export default MapGl;
+export default Map;
--- a/src/components/Map/MapLayerControl.tsx
+++ b/src/components/Map/MapLayerControl.tsx
@@ -18,24 +18,24 @@ const MapLayerControl: React.FC = () => {
  };
  return (
-    <div className="border-2 border-black w-52 border-opacity-20 rounded-lg absolute right-0 bottom-0 mb-4 mr-4 bg-white p-4 z-10">
+    <div className="fcmap-border-2 fcmap-border-black fcmap-w-52 fcmap-border-opacity-20 fcmap-rounded-lg fcmap-absolute fcmap-right-0 fcmap-bottom-0 fcmap-mb-4 fcmap-mr-4 fcmap-bg-white fcmap-p-4 fcmap-z-10">
-      <div className={`flex justify-between cursor-pointer ${isOpen ? 'mb-2' : ''}`} onClick={() => setIsOpen(!isOpen)}>
+      <div className={`fcmap-flex fcmap-justify-between fcmap-cursor-pointer ${isOpen ? 'fcmap-mb-2' : ''}`} onClick={() => setIsOpen(!isOpen)}>
-        <h3 className="text-base font-semibold text-gray-900">Kategorien:</h3>
+        <h3 className="fcmap-text-base fcmap-font-semibold fcmap-text-gray-900">Kategorien:</h3>
        <DownIcon
-          className={`w-6 h-6 text-gray-400 transform transition duration-300 ${isOpen ? 'rotate-180' : 'rotate-0'}`}
+          className={`fcmap-w-6 fcmap-h-6 fcmap-text-gray-400 fcmap-transform fcmap-transition fcmap-duration-300 ${isOpen ? 'fcmap-rotate-180' : 'fcmap-rotate-0'}`}
        />
      </div>
      {isOpen &&
        layers.map((layer) => {
          return (
-            <div key={layer} className="my-2">
+            <div key={layer} className="fcmap-my-2">
-              <label className="inline-flex items-center">
+              <label className="fcmap-inline-flex fcmap-items-center">
                <input
                  type="checkbox"
                  checked={!!filterCategories?.find((cat) => cat === layer)}
                  onChange={(e) => onChangeCheckbox(e.target.checked, layer)}
                />
-                <span className="ml-2 text-black text-sm">{layer}</span>
+                <span className="fcmap-ml-2 fcmap-text-black fcmap-text-sm">{layer}</span>
              </label>
            </div>
          );

--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -7,22 +7,22 @@ interface Props {
 const Modal: React.FC<Props> = ({ title, text, icon }) => {
  return (
-    <div role="dialog" aria-modal="true" className="fixed z-10 inset-0 flex flex-column items-center justify-center">
+    <div role="dialog" aria-modal="true" className="fcmap-fixed fcmap-z-10 fcmap-inset-0 fcmap-flex fcmap-flex-column fcmap-items-center fcmap-justify-center">
-      <div className="fixed inset-0 bg-gray-400 bg-opacity-50" aria-hidden="true"></div>
+      <div className="fcmap-fixed fcmap-inset-0 fcmap-bg-gray-400 fcmap-bg-opacity-50" aria-hidden="true"></div>
-      <div className="inline-block z-10 bg-white rounded-lg text-left overflow-hidden shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+      <div className="fcmap-inline-block fcmap-z-10 fcmap-bg-white fcmap-rounded-lg fcmap-text-left fcmap-overflow-hidden fcmap-shadow-xl sm:fcmap-my-8 sm:fcmap-align-middle sm:fcmap-max-w-lg sm:fcmap-w-full">
-        <div className="bg-white p-4 sm:p-6">
+        <div className="fcmap-bg-white fcmap-p-4 sm:fcmap-p-6">
-          <div className="sm:flex sm:items-start">
+          <div className="sm:fcmap-flex sm:fcmap-items-start">
            {icon && (
-              <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+              <div className="fcmap-mx-auto fcmap-flex-shrink-0 fcmap-flex fcmap-items-center fcmap-justify-center fcmap-h-12 fcmap-w-12 fcmap-rounded-full fcmap-bg-red-100 sm:fcmap-mx-0 sm:fcmap-h-10 sm:fcmap-w-10">
                {icon}
              </div>
            )}
-            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <div className="fcmap-mt-3 fcmap-text-center sm:fcmap-mt-0 sm:fcmap-ml-4 sm:fcmap-text-left">
-              <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+              <h3 className="fcmap-text-lg fcmap-leading-6 fcmap-font-medium fcmap-text-gray-900" id="modal-title">
                {title}
              </h3>
-              <div className="mt-2">
+              <div className="fcmap-mt-2">
-                <p className="text-sm text-gray-500">{text}</p>
+                <p className="fcmap-text-sm fcmap-text-gray-500">{text}</p>
              </div>
            </div>
          </div>

--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -6,32 +6,32 @@ const Notification: React.FC = () => {
  const setNotification = useStore((state) => state.setNotification);
  const icon: Record<string, JSX.Element> = {
-    alert: <AlertIcon className="h-6 w-6 text-red-600" />,
+    alert: <AlertIcon className="fcmap-h-6 fcmap-w-6 fcmap-text-red-600" />,
-    success: <CheckIcon className="h-6 w-6 text-green-400" />,
+    success: <CheckIcon className="fcmap-h-6 fcmap-w-6 fcmap-text-green-400" />,
  };
  return (
    notification && (
      <div
        aria-live="assertive"
-        className="z-10 fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start"
+        className="fcmap-z-10 fcmap-fixed fcmap-inset-0 fcmap-flex fcmap-items-end fcmap-px-4 fcmap-py-6 fcmap-pointer-events-none sm:fcmap-p-6 sm:fcmap-items-start"
      >
-        <div className="w-full flex flex-col items-center space-y-4 sm:items-end">
+        <div className="fcmap-w-full fcmap-flex fcmap-flex-col fcmap-items-center fcmap-space-y-4 sm:fcmap-items-end">
-          <div className="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
+          <div className="fcmap-max-w-sm fcmap-w-full fcmap-bg-white fcmap-shadow-lg fcmap-rounded-lg fcmap-pointer-events-auto fcmap-ring-1 fcmap-ring-black fcmap-ring-opacity-5 fcmap-overflow-hidden">
-            <div className="p-4">
+            <div className="fcmap-p-4">
-              <div className="flex items-start">
+              <div className="fcmap-flex fcmap-items-start">
-                <div className="flex-shrink-0">{icon[notification.type]}</div>
+                <div className="fcmap-flex-shrink-0">{icon[notification.type]}</div>
-                <div className="ml-3 w-0 flex-1 pt-0.5">
+                <div className="fcmap-ml-3 fcmap-w-0 fcmap-flex-1 fcmap-pt-0.5">
-                  <p className="text-sm font-medium text-gray-900">{notification.title}</p>
+                  <p className="fcmap-text-sm fcmap-font-medium fcmap-text-gray-900">{notification.title}</p>
-                  <p className="mt-1 text-sm text-gray-500">{notification.text}</p>
+                  <p className="fcmap-mt-1 fcmap-text-sm fcmap-text-gray-500">{notification.text}</p>
                </div>
-                <div className="ml-4 flex-shrink-0 flex">
+                <div className="fcmap-ml-4 fcmap-flex-shrink-0 fcmap-flex">
                  <button
-                    className="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    className="fcmap-bg-white fcmap-rounded-md fcmap-inline-flex fcmap-text-gray-400 hover:fcmap-text-gray-500 focus:fcmap-outline-none focus:fcmap-ring-2 focus:fcmap-ring-offset-2 focus:fcmap-ring-indigo-500"
                    onClick={() => setNotification(null)}
                  >
-                    <span className="sr-only">Close</span>
+                    <span className="fcmap-sr-only">Close</span>
-                    <XIcon className="h-5 w-5" />
+                    <XIcon className="fcmap-h-5 fcmap-w-5" />
                  </button>
                </div>
              </div>

--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -45,7 +45,7 @@ const Select = <OptionType, isMulti extends boolean>(props: NamedProps<OptionTyp
      placeholder={'Tags auswählen...'}
      styles={customStyles}
      name="pois"
-      className="hover:border-opacity-40 rounded-lg w-full border-2 border-black border-opacity-20 focus-within:border-indigo-300 focus-within:ring focus-within:ring-indigo-200 focus-within:ring-opacity-50 mt-1"
+      className="hover:fcmap-border-opacity-40 fcmap-rounded-lg fcmap-w-full fcmap-border-2 fcmap-border-black fcmap-border-opacity-20 focus-within:fcmap-border-indigo-300 focus-within:fcmap-ring focus-within:fcmap-ring-indigo-200 focus-within:fcmap-ring-opacity-50 fcmap-mt-1"
      {...props}
    />
  );

--- a/src/components/Sidebar/CloseButton.tsx
+++ b/src/components/Sidebar/CloseButton.tsx
@@ -10,8 +10,8 @@ const CloseButton: React.FC<Props> = ({ onClick, absolute = false }) => {
    <CloseIcon
      size={32}
      className={`${
-        absolute ? 'absolute left-5 top-5' : ''
+        absolute ? 'fcmap-absolute fcmap-left-5 fcmap-top-5' : ''
-      } p-1 text-gray-600 inline-block cursor-pointer bg-gray-200 bg-opacity-30 hover:bg-opacity-80 rounded-full`}
+      } fcmap-p-1 fcmap-text-gray-600 fcmap-inline-block fcmap-cursor-pointer fcmap-bg-gray-200 fcmap-bg-opacity-30 hover:fcmap-bg-opacity-80 fcmap-rounded-full`}
      onClick={onClick}
    />
  );

--- a/src/components/Sidebar/ListElement.tsx
+++ b/src/components/Sidebar/ListElement.tsx
@@ -14,15 +14,15 @@ const ListElement: React.FC<Props> = ({ value, hovered, ...restProps }) => {
    value && (
      <div
        {...restProps}
-        className={`border-2 border-black border-opacity-20 ${
+        className={`fcmap-border-2 fcmap-border-black fcmap-border-opacity-20 ${
-          hovered ? 'border-opacity-40' : 'hover:border-opacity-40'
+          hovered ? 'fcmap-border-opacity-40' : 'hover:fcmap-border-opacity-40'
-        } cursor-pointer rounded-lg mx-4 my-2`}
+        } fcmap-cursor-pointer fcmap-rounded-lg fcmap-mx-4 fcmap-my-2`}
      >
-        <div className="p-3">
+        <div className="fcmap-p-3">
-          <h2 className="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">
+          <h2 className="fcmap-tracking-widest fcmap-text-xs fcmap-uppercase fcmap-title-font fcmap-font-medium fcmap-text-gray-400 fcmap-mb-1">
            {value.category}
          </h2>
-          <h1 className="title-font text-lg font-medium text-gray-900">{value.name}</h1>
+          <h1 className="fcmap-title-font fcmap-text-lg fcmap-font-medium fcmap-text-gray-900">{value.name}</h1>
        </div>
      </div>
    )

--- a/src/components/Sidebar/SidebarContainer.tsx
+++ b/src/components/Sidebar/SidebarContainer.tsx
@@ -6,7 +6,7 @@ interface Props {
 const SidebarContainer: React.FC<Props> = ({ className, children }) => {
  return (
    <aside
-      className={`sidebar box-border flex flex-col border-t-2 md:border-r-2 md:border-t-0 border-black border-opacity-20 ${
+      className={`sidebar fcmap-box-border fcmap-flex fcmap-flex-col fcmap-border-t-2 md:fcmap-border-r-2 md:fcmap-border-t-0 fcmap-border-black fcmap-border-opacity-20 ${
        className ?? ''
      }`}
    >

--- a/src/components/Sidebar/SidebarListView.tsx
+++ b/src/components/Sidebar/SidebarListView.tsx
@@ -29,17 +29,17 @@ const SidebarListView: React.FC = () => {
  return (
    <SidebarContainer>
-      <div className="flex-col m-4 mb-2 pb-2 border-black border-opacity-20 border-b-2">
+      <div className="fcmap-flex-col fcmap-m-4 fcmap-mb-2 fcmap-pb-2 fcmap-border-black fcmap-border-opacity-20 fcmap-border-b-2">
-        <div className="flex justify-between items-center">
+        <div className="fcmap-flex fcmap-justify-between fcmap-items-center">
-          <h1 className="text-xl font-medium title-font text-gray-900">{filteredData?.length} Orte:</h1>
+          <h1 className="fcmap-text-xl fcmap-font-medium fcmap-title-font fcmap-text-gray-900">{filteredData?.length} Orte:</h1>
          <FilterIcon
            onClick={() => setFilterInputIsOpen(!filterInputIsOpen)}
-            className="text-black text-opacity-20 hover:text-opacity-60 w-5 h-5 cursor-pointer"
+            className="fcmap-text-black fcmap-text-opacity-20 hover:fcmap-text-opacity-60 fcmap-w-5 fcmap-h-5 fcmap-cursor-pointer"
          />
        </div>
        {filterInputIsOpen && (
-          <div className="py-2">
+          <div className="fcmap-py-2">
            <Select
              options={options}
              isMulti={true}

--- a/src/components/Sidebar/SidebarSingleView.tsx
+++ b/src/components/Sidebar/SidebarSingleView.tsx
@@ -15,8 +15,8 @@ const SidebarSingleView: React.FC = () => {
  const history = useHistory();
  return (
-    <SidebarContainer className={`relative p-0`}>
+    <SidebarContainer className={`fcmap-relative fcmap-p-0`}>
-      <div className={`${selectedPoi?.image ? '' : 'pl-5 pt-5 '}`}>
+      <div className={`${selectedPoi?.image ? '' : 'fcmap-pl-5 fcmap-pt-5 '}`}>
        <CloseButton
          absolute
          onClick={() => {
@@ -26,24 +26,24 @@ const SidebarSingleView: React.FC = () => {
      </div>
      {selectedPoi?.image && (
        <img
-          className="lg:h-48 md:h-36 w-full object-cover object-center"
+          className="lg:fcmap-h-48 md:fcmap-h-36 fcmap-w-full fcmap-object-cover fcmap-object-center"
          src={selectedPoi?.image}
          alt={selectedPoi?.name}
        />
      )}
-      <div className="p-6">
+      <div className="fcmap-p-6">
-        <h2 className="tracking-widest uppercase text-xs title-font font-medium text-gray-400 mb-1">
+        <h2 className="fcmap-tracking-widest fcmap-uppercase fcmap-text-xs fcmap-title-font fcmap-font-medium fcmap-text-gray-400 fcmap-mb-1">
          {selectedPoi?.category}
        </h2>
-        <h1 className="title-font text-lg font-medium text-gray-900 mb-3">{selectedPoi?.name}</h1>
+        <h1 className="fcmap-title-font fcmap-text-lg fcmap-font-medium fcmap-text-gray-900 fcmap-mb-3">{selectedPoi?.name}</h1>
-        <p className="leading-relaxed mb-6">{selectedPoi?.description}</p>
+        <p className="fcmap-leading-relaxed fcmap-mb-6">{selectedPoi?.description}</p>
        {selectedPoi?.website && (
-          <div className={'flex items-center'}>
+          <div className={'fcmap-flex fcmap-items-center'}>
-            <HomeIcon size={18} className={'text-gray-500 mr-2'} />
+            <HomeIcon size={18} className={'fcmap-text-gray-500 fcmap-mr-2'} />
            <a
              target="_blank"
              rel="noopener noreferrer"
-              className={'text-sm text-gray-500 hover:underline'}
+              className={'fcmap-text-sm fcmap-text-gray-500 hover:fcmap-underline'}
              href={selectedPoi?.website}
            >
              {strippedUrl}
@@ -51,19 +51,19 @@ const SidebarSingleView: React.FC = () => {
          </div>
        )}
        {selectedPoi?.address && (
-          <div className={'flex items-center mt-3'}>
+          <div className={'fcmap-flex fcmap-items-center fcmap-mt-3'}>
-            <AddressIcon size={18} className={'text-gray-500 mr-2'} />
+            <AddressIcon size={18} className={'fcmap-text-gray-500 fcmap-mr-2'} />
-            <div className="text-sm text-gray-500">{selectedPoi?.address}</div>
+            <div className="fcmap-text-sm fcmap-text-gray-500">{selectedPoi?.address}</div>
          </div>
        )}
        {selectedPoi?.relationStatus && (
-          <div className={'flex items-center mt-3'}>
+          <div className={'fcmap-flex fcmap-items-center fcmap-mt-3'}>
-            <RealtionStatusIcon size={18} className={'text-gray-500 mr-2'} />
+            <RealtionStatusIcon size={18} className={'fcmap-text-gray-500 fcmap-mr-2'} />
-            <div className="text-sm text-gray-500">{selectedPoi?.relationStatus}</div>
+            <div className="fcmap-text-sm fcmap-text-gray-500">{selectedPoi?.relationStatus}</div>
          </div>
        )}
        {!!selectedPoi?.tags?.length && (
-          <div className={'flex items-center mt-3 flex-wrap'}>
+          <div className={'fcmap-flex fcmap-items-center fcmap-mt-3 fcmap-flex-wrap'}>
            {selectedPoi?.tags.map((tag) => (
              <Tag key={tag.id} color={tag.color}>
                {tag.displayName}

--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@@ -2,14 +2,14 @@
 const Spinner: React.FC = () => {
  return (
    <svg
-      className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+      className="fcmap-animate-spin -fcmap-ml-1 fcmap-mr-3 fcmap-h-5 fcmap-w-5 fcmap-text-white"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
    >
-      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+      <circle className="fcmap-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
      <path
-        className="opacity-75"
+        className="fcmap-opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
      ></path>

--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -12,15 +12,15 @@ const Tag: React.FC<Props> = ({ children, onClick, onClickDelete, color = 'pink'
    <div
      onClick={onClick}
      className={`${
-        onClick ? 'cursor-pointer ' : ''
+        onClick ? 'fcmap-cursor-pointer ' : ''
-      }inline-flex flex-nowrap items-center px-2 py-0.5 m-0.5 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 mr-2 whitespace-nowrap`}
+      }fcmap-inline-flex fcmap-flex-nowrap fcmap-items-center fcmap-px-2 fcmap-py-0.5 fcmap-m-0.5 fcmap-rounded-full fcmap-text-sm fcmap-font-medium fcmap-bg-indigo-100 fcmap-text-indigo-800 fcmap-mr-2 fcmap-whitespace-nowrap`}
      style={color ? { backgroundColor: color } : {}}
    >
      {children}
      {onClickDelete && (
        <CloseIcon
          onClick={onClickDelete}
-          className="ml-0.5 inline-block cursor-pointer text-gray-600 hover:text-gray-800"
+          className="fcmap-ml-0.5 fcmap-inline-block fcmap-cursor-pointer fcmap-text-gray-600 hover:fcmap-text-gray-800"
          size={12}
        />
      )}

--- a/src/index.css
+++ b/src/index.css
@@ -20,28 +20,12 @@ code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
-.marker-red {
-  color: var(--fabcity-red);
-}
-.marker-green {
-  color: var(--fabcity-green);
-}
-.marker-blue {
-  color: var(--fabcity-blue);
-}
 .sidebar {
  flex-basis: 40%;
  overflow-y: auto;
  flex-shrink: 0;
 }
-.leaflet-control-container {
-  display: none;
-}
 @screen md {
  .sidebar {
    flex-basis: 30vw;
@@ -55,18 +39,6 @@ code {
  }
 }
-.form-input-custom {
-  @apply mt-1 block w-full rounded-lg border-2 border-black border-opacity-20 hover:border-opacity-40 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
-}
-.form-label {
-  @apply leading-none text-sm text-gray-600;
-}
-.form-button {
-  @apply mt-2 flex justify-center items-center text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded-lg text-lg disabled:opacity-50 disabled:cursor-default disabled:hover:bg-indigo-500;
-}
 .input-chevron {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;

--- a/tailwind.config.js
+++ b/tailwind.config.js
 module.exports = {
  content: ['./src/**/*.{html,js,jsx,tsx,md,mdx,astro}'],
+  prefix: 'fcmap-',
  plugins: [
    require('@tailwindcss/forms')({
      strategy: 'class',