Monorepo and PurgeCSS

[jamesg1]

Hi tailwind community,

I am considering tailwind as a css framework to migrate a large enterprise site to a better structure for CSS.

We currently have a number of packages within the same monorepo. We have a main package which contains our core global css, and then other packages containing micro applications which utilise both base styling and component styling.

Would you get your base to scan through all packages html/components for a single purge or do you just have each repo containing the classes it needs and don't care that flex is defined in say 3 packages output css.

[myang5]

Hi James,

I recently setup Tailwind in our monorepo as well and PostCSS seems to have no problem with scanning through all the packages in a single purge as long as purge correctly references all the files that use Tailwind classes.

Our tailwind.config.js:

module.exports = {
  mode: 'jit',
  purge: ['../apps/**/*.{js,jsx}', './src/**/*.{js,jsx}'],
  // etc.
}; 

Our directory structure:

frontend/
├── apps/
│   ├── // our application code using Tailwind, folder referenced in purge
└── components/
    ├── lib/
    ├── src/
    │   ├── // components code using Tailwind, referenced in purge
    │   └── styles/
    │       └── tailwind.css // the CSS file containing Tailwind directives
    ├── package.json // package.json that runs the commands to build and watch via postcss-cli
    ├── postcss.config.js // in the same directory as the package.json running postcss-cli
    └── tailwind.config.js // important that tailwind.config.js is in the same root as postcss.config.js

I put these commands in the components/package.json as well:

  "scripts": {
    "tailwind:watch": "postcss src/styles/tailwind.css -o lib/styles/tailwind.css -w",
    "tailwind:build": "postcss src/styles/tailwind.css -o lib/styles/tailwind.css",
  },

[myang5]

Realized I wrote the file structure slightly wrong 😅 Updated where the config and json files are!

[jamesg1]

Thanks for your answer :)

So say you change something in apps requiring styling changes then you have a dependency for components folder, thus requiring both to be released at the same time?

[myang5]

Yes, I think so. It it is true that with my specific configuration, one CSS file is generated for all Tailwind classes in both apps and components, and through our CI/CD pipeline the code in components gets compiled into each app. This works for my team because the current frontend code is so tightly coupled we always release the entire frontend together (I'm not exactly sure why we have a separate components "package" instead of just a folder lol). So I imagine with the setup I have, you can release components on its own, but you would have to release anything in apps together with components.

[Kerluken]

Hello, I have recently moved my multiple repositories javascript packages to a single monorepo in typescript. It's my first-time complete Typescript project and would love it if you had some time to give me some feedback. I had a lot of trouble finding some types of external libraries. Does anyone have experience with typing webpack and gulp plugin?

kabosu coin

[ghost]

spam link, avoid