Cannot apply Tailwind arbitrary values in Frontity

[jagadmitul]

Bug report
Custom Tailwind CSS is not applying, like text-center text-[50px] text-[#eb3a34] mb-[30px]
I've tried using below packages,
https://github.com/cbfn/frontity-with-tailwind
https://github.com/bradlc/babel-plugin-tailwind-components
but not working

• I've updated both my project and my packages to the latest Frontity versions: https://docs.frontity.org/guides/keep-frontity-updated
• I've searched for existing issues.
• I've checked the documentation: https://docs.frontity.org
• I've checked the community forum: https://community.frontity.org

Expected behavior
It should apply the custom styling defined in square brackets.

Observed behavior
It does not apply the style.

Steps involved to reproduce the problem

npx frontity create my-app
npm install --save tailwindcss babel-plugin-macros tailwind.macro@next
or
npm install --save-dev babel-plugin-macros tailwind.macro
Apply style like below

import React from 'react'
import { connect, styled } from "frontity"
import tw from 'tailwind.macro'

const Head = ({ state, libraries }) => {
    return (
        <div>
            <Heading>
                your code
            </Heading>
        </div>
    )
}

export default connect(Head);

const Heading = styled('h2')`
  ${tw`text-[50px] text-red-200 hover:text-blue-300`};
`

Info about your system

System:

• OS: Windows 10 10.0.19044
• CPU: (4) x64 Intel(R) Core(TM) i5-4200U CPU @ 1.60GHz
• Memory: 700.80 MB / 3.89 GB

Binaries:

• Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
• npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD

Browsers:

• Chrome: Not Found
• Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.49)
• Internet Explorer: 11.0.19041.1566

npmPackages:

• @aamodtgroup/frontity-contact-form-7: ^0.2.14 => 0.2.14
• @frontity/core: ^1.16.0 => 1.16.0
• @frontity/html2react: ^1.7.0 => 1.7.0
• @frontity/mars-theme: ./packages/mars-theme => 1.6.2
• @frontity/tiny-router: ^1.4.4 => 1.4.4
• @frontity/wp-source: ^1.11.7 => 1.11.7
• autoprefixer: ^10.4.7 => 10.4.7 (9.8.8)
• babel-plugin-macros: ^3.1.0 => 3.1.0 (2.8.0)
• first: file:packages/first => 1.0.0
• frontity: ^1.17.2 => 1.17.2
• postcss: ^8.4.14 => 8.4.14 (7.0.32, 6.0.23, 7.0.39)
• tailwind.macro: ^1.0.0-alpha.10 => 1.0.0-alpha.10
• tailwindcss: ^3.1.6 => 3.1.6 (1.9.6)

npmGlobalPackages:

• frontity: Not Found
• npx: Not Found

Possible solution

If you implement Tailwind CLI or Tailwind PostCSS then arbitrary values will work but I don't know how to implement it in Frontity