@tailwindcss/typography": "^0.5.2, prose not working at all

I’ve installed tailwindcss/typography, then added the tw="prose" , but the classes are not being applied. Here’s what I see in browser:

Below is my markup:

        <h1>test</h1>
        <h2>test 2</h2>
        <p>
          Lorem ipsum <a href="#">dolor sit</a> amet consectetur adipisicing
          elit. Quas incidunt totam fugiat cumque! Suscipit obcaecati rerum
          molestias sed quidem excepturi deserunt dolorem iure repellat soluta
          perferendis veritatis quod, mollitia autem.
        </p>
        <p>
          Lorem ipsum <a href="#">dolor sit</a> amet consectetur adipisicing
          elit. Quas incidunt totam fugiat cumque! Suscipit obcaecati rerum
          molestias sed quidem excepturi deserunt dolorem iure repellat soluta
          perferendis veritatis quod, mollitia autem.
        </p>
      </article>

below are my dependencies:

    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@sindresorhus/slugify": "^1.1.0",
    "debounce": "^1.2.1",
    "dotenv": "^10.0.0",
    "gatsby": "^4.0.2",
    "gatsby-plugin-emotion": "^7.13.0",
    "gatsby-plugin-gatsby-cloud": "^4.0.0",
    "gatsby-plugin-google-analytics": "^4.0.0",
    "gatsby-plugin-image": "^2.0.0",
    "gatsby-plugin-react-helmet": "^5.0.0",
    "gatsby-plugin-sharp": "^4.0.0",
    "gatsby-plugin-sitemap": "^5.0.0",
    "gatsby-source-filesystem": "^4.0.0",
    "gatsby-source-shopify": "^6.0.0",
    "gatsby-transformer-sharp": "^4.0.0",
    "isomorphic-fetch": "^3.0.0",
    "lodash.debounce": "^4.0.8",
    "lodash.isequal": "^4.5.0",
    "query-string": "^7.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.1.0",
    "shopify-buy": "^2.11.0",
    "tailwindcss": "^3.0.24",
    "twin.macro": "^2.8.2",
    "urql": "^2.0.2"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.2"
  }