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";