skflowne

<div>
  <p>Test SCSS</p>
</div>

<style lang="scss">
  div {
    p {
      color: red;
    }
  }

skflowne

<p class="text-teal-500">Tailwind is working</p>

skflowne

import React, { Suspense } from "react"
import { RecoilRoot } from "recoil"
import TimelineMap from "./components/map/TimelineMap"
import TimeTravelButtons from "./components/time/TimeTravelButtons"
import TimeTravelSlider from "./components/time/TimeTravelSlider"
import CurrentStatSelect from "./components/stats/CurrentStatSelect"

const App = () => {
    return (
        <RecoilRoot>

skflowne

import React, { Suspense } from "react"
import { RecoilRoot } from "recoil"
import TimelineMap from "./components/map/TimelineMap"
import TimeTravelButtons from "./components/time/TimeTravelButtons"
import TimeTravelSlider from "./components/time/TimeTravelSlider"

const App = () => {
    return (
        <RecoilRoot>
            <Suspense fallback="Loading...">

skflowne

import React, { Suspense } from "react"
import { RecoilRoot } from "recoil"
import TimelineMap from "./components/map/TimelineMap"
import TimeTravelButtons from "./components/time/TimeTravelButtons"

const App = () => {
    return (
        <RecoilRoot>
            <Suspense fallback="Loading...">
                <TimeTravelButtons />

skflowne

import React, { useMemo } from "react"
import styled from "styled-components"
import { useRecoilState } from "recoil"
import { currentDateState, DATE_RANGE } from "../../state/app"
import { differenceInCalendarDays, addDays, formatDistanceToNow } from "date-fns"

const StyledTimeTravelSlider = styled("div")`
    display: flex;
    flex-flow: column;
    align-items: center;

skflowne

import React from "react"
import DeckGLMap from "./DeckGLMap"
import { ScatterplotLayer } from "@deck.gl/layers"

const DataMap = ({
    mapboxToken = "",
    data = [],
    dotCoordinates = "coordinates",
    displayStat = "cases",
    statMax = 1,

skflowne

import React from "react"
import { useRecoilValueLoadable, useRecoilValue } from "recoil"

import { mapboxToken } from "../../mapbox-token"

import { countriesQuery, currentDateStatusState } from "../../state/api"
import { currentStatState, currentStatMaxState } from "../../state/app"

import DataMap from "./DataMap"
import LoadingIndicator from "../ui/LoadingIndicator"

skflowne

import React from "react"
import DeckGLMap from "./DeckGLMap"
import { ScatterplotLayer } from "@deck.gl/layers"

const DataMap = ({
    mapboxToken = "",
    data = [],
    dotCoordinates = "coordinates",
    displayStat = "cases",
    statMax = 1,

skflowne

import { selector, atom } from "recoil"
import { isAfter, isBefore, format } from "date-fns"
import { API_DATE_FORMAT, statusByDateQuery } from "../api"

export const DATE_RANGE = [new Date("10 Jan 2020"), new Date()]

export const CASES = "cases"
export const DEATHS = "deaths"
export const RECOVERED = "recovered"