Pebbles UI
An example of a build setup using Rollup for a component library based on React + Tailwind. Inspired by:
- https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe
- https://samrobbins.uk/blog/tailwind-component-library
Work flow:
- You develop your components in isolation using Storybook (excluded in this example repo for simplicity). You export your components and typings as shown in the Button example.
- Once ready to publish a new version, you build using rollup (
yarn build). This will create a dist folder with CommonJS as well as ESM modules. Tailwind's css is purged and included in the JS bundle (you can choose to extract the css into a separate file if desired). Typings are also included and sourcemapped. - You then bump the version number in package.json, and publish to GitHub packages (
npm publish).
Any user with a valid read access token in their ~/.npmrc can use the comp lib by doing (in case of LUI) yarn add @LiveIntent/lui. It has no dependency on Tailwind.
When coding and adding a Button, say, in your JSX, your IDE will automatically detect and suggest the Button from the comp lib.