Example of twin inside an nx-workplace

[mmmoli]

discussion from #20

See apps/web/pages/index.tsx for example usage.

It's a minimal example that closely follows the rollup + component library in this repo.

What I'd really love, is to demonstrate how the theme can also be customised by introducing a new new lib.

@ben-rogerson thoughts?

[ben-rogerson]

Mammoth effort here, great job 💯
I've looked over the code but I think I'll need to fire it up to work out that question.
Will get back to you shortly 👍

[ben-rogerson]

What I'd really love, is to demonstrate how the theme can also be customised by introducing a new lib.

Could you let me know what you mean by theme and introducing a new lib?

[mmmoli]

Of course.

Theme
Custom Tailwind Configuration https://tailwindcss.com/docs/theme

"New Lib"
"Library" is nrwl's name for just another package in their monorepo structure. From the docs:

Libraries are not just a way to share code in Nx. They are also useful for factoring out code
into small units with a well-defined public API.

Imagine publishing your Custom Tailwind Configuration to NPM separately,
ready to be pulled into any Tailwind/Twin.macro project later on?

I'm trying to ask: "Shall I put all of that in the example too?"

[anymaniax]

I did a repository with nx, twin.macro and styled-components and I wanted to have a tailwind config by project. To do it I did the following script that I use in the babelMacro config property. Maybe it can help 😀

[mmmoli]

I did a repository with nx, twin.macro and styled-components and I wanted to have a tailwind config by project. To do it I did the following script that I use in the babelMacro config property. Maybe it can help 😀

Interesting!

I got something to work that was way dumber:

// libs/web-ui/babel-plugin-macros.config.js
module.exports = {
  twin: {
    preset: 'emotion',
    config: 'libs/web-ui/tailwind.config.js',
  },
};

// libs/web-ui/tailwind.config.js
module.exports = {
  presets: [require('../tailwind-config')],
};

// libs/tailwind-config/package.json
{
  "name": "@flua/tailwind-config",
  "version": "0.0.1",
  "main": "src/index.js"
}

[ben-rogerson]

@mmmoli It would be awesome to add that a tailwind config setup like that to your nx example.

Also - I wonder if we could use path.resolve to avoid specifying the project name:

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

module.exports = {
  twin: {
    preset: 'emotion',
+    config: resolve(__dirname, "tailwind.config.js"),
-    config: 'libs/web-ui/tailwind.config.js',
  },
};

// libs/web-ui/tailwind.config.js
module.exports = {
  presets: [require('../tailwind-config')],
};

// libs/tailwind-config/package.json
{
  "name": "@flua/tailwind-config",
  "version": "0.0.1",
  "main": "src/index.js"
}

[mmmoli]

Crucially, here's where we're using a custom value set in the theme.

[mmmoli]

Here's where we're defining a special variable, in this case, a brand colour called "zabadoo".

[ben-rogerson]

Hey @mmmoli, thanks for the work on this. I'm planning to take a good look into this in the next few days 👍