Twin Macro can't get daisyui (tailwind's plugin) class on NX workspace project

Question

I'm creating project with nx, and also use nx preset to setup the project,and I tried to add some ready-to-go UI lib, adding tailwind first, then adding 'daisyui' the tailwind components. But I got the issue that seems macro can't find daisyui class. for normal tailwind class it's working properly.

if you need more context and file config that I'm missing to show here, please tell me. thankyou for all your helps.

Error:

ERROR in ./src/app/app.tsx
Module build failed (from ../../node_modules/@nrwl/web/src/utils/web-babel-loader.js):
MacroError: path/on/my/machine/mono-repo/apps/appname/src/app/app.tsx:

✕ btn was not found

btn is button className on daisyui component.

How I use twin macro

import styled from "@emotion/styled"
import tw from "twin.macro"
...
const StyledButton = styled.button`
  ${tw`btn btn-primary`}
`

.babelrc

{
  "presets": [
    [
      "@nrwl/react/babel",
      {
        "runtime": "automatic",
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ],
    "@emotion/babel-preset-css-prop",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "babel-plugin-transform-inline-environment-variables",
    ["babel-plugin-twin", { "debug": true }],
    "babel-plugin-macros",
    [
      "@emotion/babel-plugin-jsx-pragmatic",
      {
        "export": "jsx",
        "import": "__cssprop",
        "module": "@emotion/react"
      }
    ],
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "__cssprop",
        "pragmaFrag": "React.Fragment"
      }
    ]
  ]
}

and project.json setup config

{
  "root": "apps/appname",
  "sourceRoot": "apps/appname/src",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nrwl/web:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "compiler": "babel",

         ....others config ....
    
        "styles": ["apps/sandbox/src/styles.scss"],
        "scripts": [],
        "webpackConfig": "apps/sandbox/webpackConfig.js"
      },
    ...
    }
    ...
  }

my webpackConfig.js

const webpack = require("webpack")
const nrwlConfig = require("@nrwl/react/plugins/webpack.js")
const webpackTailwindConfig = require("./webpack-tailwind.config")

module.exports = (config, env) => {
  config = nrwlConfig(config)
  return {
    ...config,

    ...other config ..
    
    module: {
      ...config.module,
      rules: [...config.module.rules, webpackTailwindConfig.tailwindWebpackRule]
    },
    node: { ...config.node, global: true }
  }
}

webpack-tailwind.config

const tailwindWebpackRule = {
  test: /\.scss$/,
  loader: "postcss-loader"
}

exports.tailwindWebpackRule = tailwindWebpackRule

and style.scss that import all tailwind

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";