@codecrib/ui — Usage

This package ships React components styled with Tailwind utilities and provides two consumption options for downstream projects:

1. Prebuilt CSS (no Tailwind runtime required)
2. Tailwind preset (for projects that run Tailwind and want to compose/ tree-shake)

Why two options?

• Prebuilt CSS is the easiest DX for consumers — import a single CSS file and use components without adding Tailwind to the app.
• The Tailwind preset lets downstream apps include the UI's design tokens and class utilities directly in their Tailwind build so they can purge unused styles and extend tokens.

1) Prebuilt CSS (recommended for simple consumption)

• What it provides: dist/styles.css — generated by the UI package build.

• How to use:

  • Build the UI package (or use the published package):

    # from monorepo root
    pnpm --filter=@codecrib/ui run build

  • Import the CSS in your app entry:

    import "@codecrib/ui/styles.css";
    import React from 'react'
    import { createRoot } from 'react-dom/client'
    import App from './App'
    
    createRoot(document.getElementById('root')!).render(<App />)

  • Pros: consumers don't need to install or run Tailwind. Quick to get started.

  • Cons: consumers cannot purge UI CSS at their app-level Tailwind build and have less flexibility to override core tokens at build time.

2) Tailwind preset (recommended for advanced consumers)

• What it provides: preset export (CJS at dist/tailwind.preset.cjs) — a small Tailwind preset containing theme tokens and plugin hooks used by the UI.

• How to use:

  • In the consuming project's tailwind.config.cjs:

    module.exports = {
      presets: [require('@codecrib/ui/preset')],
      content: ['./src/**/*.{js,ts,jsx,tsx}', /* ... */],
      theme: {
        extend: {
          // app-specific overrides
        }
      },
      plugins: [],
    }

  • Then run your normal Tailwind build (consuming app must include Tailwind as a devDependency). This allows the app to purge unused classes from both app and UI usage.

  • Pros: full control and smaller final CSS via purge. Can override tokens and extend the design system.

  • Cons: consumer must configure and run Tailwind.

Notes & build commands

• The UI package has a build script that outputs compiled JS and CSS and copies the preset into dist:

  pnpm --filter=@codecrib/ui run build

• When publishing, CI should build the UI so dist contains styles.css and tailwind.preset.cjs — see .github/workflows/publish.yml in the repo.

Which to choose?

• Use the prebuilt CSS for demos, quick integrations, or consumer apps that shouldn't run Tailwind. Use the preset if you want full integration with your app's Tailwind pipeline and smaller, purged outputs.

If you want, I can add examples for Next.js or Storybook showing both approaches.