Unable to create custom tailwind component library

I try to create my own react component library based on tailwind CSS.

I start with a simple button component

import * as React from 'react'

interface Props {
  text: string
  onClick?(): any
}

export const Button = ({ text, onClick }: Props) => {
  return (
    <button onClick={onClick} className='bg-primary-500 rounded-md'>
      {text}
    </button>
  )
}

I push it on npm : https://www.npmjs.com/package/tailwind-lib-quentin

Then I create a simple React app that use this package

import "tailwind-lib-quentin/dist/index.css";
import { Button } from "tailwind-lib-quentin";

function App() {
  return (
    <div className="App">
      <Button text="Test" onClick={() => console.log("ok")} />
      <div className="w-full h-40 bg-primary-500">Bonjour</div>
    </div>
  );
}

export default App;

as you can see I import the css of my package that extend tailwind but my components are not styled at all. The button work but I can't see any style on it and I don't get any errors.

Here is reproductible example on Codesandbox : https://codesandbox.io/s/frosty-sea-1y879 here is the package repository : https://github.com/quentin-bardenet/tailwind-lib-quentin