Theo's Typesafe Cult•2y ago

Compiling TailwindCSS for Monorepos

I have a monorepo with workspaces - ui and client. I want to create components in ui and use them in client. I am using tailwindcss as my style provider, but am having a very hard time compiling it. I am not going to publish them on NPM, and it just need to work in client which is a nextjs project. Any help is appreciated.

12 Replies

awexis•2y ago

I think you let the web apps compile it them selves you can share tailwind configs with your projects though. https://github.com/t3-oss/create-t3-turbo/tree/main/packages/config/tailwind

GitHub

create-t3-turbo/packages/config/tailwind at main · t3-oss/create-t3...

Clean and simple starter repo using the T3 Stack along with Expo React Native - create-t3-turbo/packages/config/tailwind at main · t3-oss/create-t3-turbo

harshcutOP•2y ago

i want to keep the components and their deps separate from the client repo what is the cli command for tailwind to output compiled css without unused styles?

npx tailwindcss -o build.css --minify

npx tailwindcss -o build.css --minify

currently using this, but it gives complete output with unused styles.

Unknown User•2y ago

Message Not Public

harshcutOP•2y ago

for client i have used tailwindcss using the guide. in what way do i setup the ui workspace?

parapheen•2y ago

Check out an example from turborepo github — https://github.com/vercel/turbo/tree/main/examples/with-tailwind

GitHub

turbo/examples/with-tailwind at main · vercel/turbo

Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turbopack and Turborepo. - turbo/examples/with-tailwind at main · vercel/turbo

harshcutOP•2y ago

I got it working by adding this to client/tailwind.config.js

  content: [
   './pages/**/*.{js,ts,jsx,tsx}',
   './components/**/*.{js,ts,jsx,tsx}',
+  '../ui/src/**/*.{js,ts,jsx,tsx}',
  ],

  content: [
   './pages/**/*.{js,ts,jsx,tsx}',
   './components/**/*.{js,ts,jsx,tsx}',
+  '../ui/src/**/*.{js,ts,jsx,tsx}',
  ],

I have also added transpilePackages: ['ui'], in next.config.js. is this a correct way to go?

harshcutOP•2y ago

this is the current dir structure.

parapheen•2y ago

another alternative is to compile your ui lib and then use compiled styles from dist/

harshcutOP•2y ago

is there any upside to compile when i am not going to publish the package? this way i dont need to include a ./dist/index.css in _app.tsx in client.

parapheen•2y ago

citing the link from the template I send before This example is setup to build packages/ui and output the transpiled source and compiled styles to dist/. This was chosen to make sharing one tailwind.config.js as easy as possible, and to ensure only the CSS that is used by the current application and its dependencies is generated. Another option is to consume packages/ui directly from source without building. If using this option, you will need to update your tailwind.config.js to be aware of your package locations, so it can find all usages of the tailwindcss class names. For example, in tailwind.config.js: content: [ // app content src/**/*.{js,ts,jsx,tsx}, // include packages if not transpiling "../../packages/*/.{js,ts,jsx,tsx}", ],

harshcutOP•2y ago

consume packages/ui directly from source without building

while doing this i do need to add transpilePackages: ['ui'], to next.config, right? so that next can bundle it?

parapheen•2y ago

As far as I understand, you first compile your lib locally. Then your next app can catch needed components from the bundle by transpiling. And you don’t have to publish your library anywhere. I could be wrong since I’ve struggled the same issue recently trying to share ui between turborepo apps

Gaming

Programming

Compiling TailwindCSS for Monorepos