huszarandris Comments - Answer Overflow

huszarandris

•Created by niels on 1/17/2024 in #questions

Monorepo UI package has no styling when imported

hey, I think the problem is that you have to compile your Tailwind styles properly in ui package - not just your main app's styles that is handled by packager. For this: 1) Define or modify your dev script as follows: 2) Define your package exports. This allows you to import components directly, such as @repo/ui/components/button In the case of the styles.css you will import the compiled CSS)

{
  "name": "@repo/ui",
  "scripts": {
    ...
    "dev": "tailwindcss -i ./src/styles/styles.css -o ./dist/styles/styles.css --watch",
  },
  "exports": {
    "./components/ui/*": "./src/components/ui/*.tsx",
    "./components/*": "./src/components/*.tsx",
    "./lib/*": "./src/lib/*.ts",
    "./styles.css": "./dist/styles/styles.css"
  }
}

{
  "name": "@repo/ui",
  "scripts": {
    ...
    "dev": "tailwindcss -i ./src/styles/styles.css -o ./dist/styles/styles.css --watch",
  },
  "exports": {
    "./components/ui/*": "./src/components/ui/*.tsx",
    "./components/*": "./src/components/*.tsx",
    "./lib/*": "./src/lib/*.ts",
    "./styles.css": "./dist/styles/styles.css"
  }
}

3) import '@repo/ui/styles.css' into your app package, such as in your layout.tsx file.

95 replies

Gaming

Programming