written with React, TypeScript, TailwindCSS, & Storybook workshop for component development
lib not currently published - this is a demo repo
a Tsup bundler setup shows how to export this components lib as a package
(I'll also add some notes on how we achieved this in a monorepo)
- in
package.jsonadd the path to the project in the dependencies:
"@acme/ui": "file:../acme"
^ this will pull the components lib from the /dist, so it requires building the library first (must rebuild after making changes)
-
use
npm link--- to link ---
UI project:
npm linkend project:
npm link @acme/ui--- to unlink ---
end project:
npm unlink @acme/uiUI project:
npm unlink^ this uses the components in dev mode, the visual result in dev may differ from the end/production result; will likely require browser refresh after changes
if you've setup TW before you prob already know this
on the end project, in tailwind.config.ts
const tailwindPreset = require('@acme/ui/tailwind-config')
or
import * as tailwindPreset from '@acme/ui/tailwind-config'
then add it as a preset inside the config object
presets: [tailwindPreset]
^ this imports the tailwind.config.ts from the UI library and merges it with the TW config of the project, so that the color palette and theme configuration are included in the tailwind build
in the content array of the config, add:
'./node_modules/@acme/ui/dist/**/*.{cjs,css,cts,ts,js}'
^ this is so that Tailwind classes used by the UI components are included in the css bundle of this project
so far the popular bundlers do not support this functionality:
they cannot preserve the 'use client' directive individually when exporting Client Components
in the tsup config example, banner adds 'use client' to the top of the bundled .js and .cjs files in the dist
info: