[Edge Case] Twin macro not working properly inside a nx workspace

[smetzdev]

Hello, i have an issue inside an nx workspace.

Twin.macro itself works like a breeze, but it does not seem to work with my tailwind.config.js
It just does not take my custom styles, in my example i just added the "center" prop to the container and added a custom-color. both do not work.

Currently the tailwind.config.js is based in the root of my nx workspace, but it also does not work if i put it in the folder of a single app for example.

What would you do here?

[ben-rogerson]

Hey there

Sounds like you'll just need a babel macros config that uses a path.resolve otherwise it'll use the run location for your scripts as the base location:

// babel-plugin-macros.config.js
const { resolve } = require("path");

module.exports = {
  twin: {
    preset: "styled-components",
    config: resolve(__dirname, "tailwind.config.js"),
  },
};

There's also a draft nx workspace pr in the twin.examples repo if you're after some more ideas.

[smetzdev]

Thank you, worked like a breeze. I would never thought of that on my own 😅

[ben-rogerson]

I'm aiming to get some docs up around this use case asap

[smetzdev]

Looking forward to that. In my opinon twin.macro is the best way to use tailwind inside a nx-workspace in an app-agnostic way. If i can help with documenting, please let me know.