Simple styling with tailwind

[davidnoah]

I know this is probably a big ask here, but it would be great for this package to be infinitely customizable an work with more modern frameworks like tailwind.

As of now its really hard to update any of the styles

[Hamdi235050]

Hello davidnoah
To make the package infinitely customizable and compatible with modern frameworks like Tailwind CSS, you could consider the following approach :

Move Styles to Configuration or Theme Files for exemple :
const defaultStyles = {
button: 'bg-blue-500 text-white px-4 py-2 rounded',
card: 'shadow-md border rounded-lg p-4',
};

export const getStyles = (customStyles) => ({
...defaultStyles,
...customStyles,
});
than Integrate Tailwind Compatibility
Instead of hardcoding styles, use utility classes from Tailwind CSS.
Provide a way for users to pass their own Tailwind classes.
Example:

const MyComponent = ({ customClasses = '' }) => {
return (
<div className={p-4 bg-gray-100 ${customClasses}}>
{/* Component Content */}

);
};
3. Expose a Configuration API
Add an API that lets developers inject their own theme or Tailwind classes.
You can allow them to pass a configuration object at initialization.
for example:

import { configure } from 'your-package';

configure({
theme: {
button: 'bg-green-500 hover:bg-green-600 text-white font-bold',
},
});
4. Provide a Default Tailwind Theme
Offer a pre-built Tailwind configuration as the default theme.
This makes it easier for users already using Tailwind.
Example:

const tailwindTheme = {
button: 'bg-blue-500 hover:bg-blue-600 text-white font-medium',
input: 'border rounded px-3 py-2 focus:ring focus:ring-blue-300',
};
Good Luck