Support for Custom CSS Classes with @headlessui/tailwindcss

[AlexZan]

Support for Custom CSS Classes with @headlessui/tailwindcss

Firstly, I want to express my appreciation for the excellent work on the @headlessui/tailwindcss plugin. It's a great tool that simplifies the process of conditionally applying styles based on component state.

However, during the course of using the plugin in a larger React application, I've encountered a limitation. The plugin currently does not support custom CSS classes defined in an external CSS file. This limitation can lead to repeated code, especially in larger applications where similar styles are applied across different components, thereby violating the DRY (Don't Repeat Yourself) principle.

For instance, in an application that uses a dark theme, custom classes are defined for various states (selected, not selected, etc.) in a theme.css file. When using the plugin, I found that I couldn't reference these classes, but had to define the styles inline within each component, leading to repetition of the same styles in multiple places.

Proposal:

I propose that the plugin be enhanced to support custom CSS classes. This would allow developers to define styles in a central location (like a theme.css file) and reference these styles within their components. This would keep the code DRY and make maintenance easier.

I understand that this might not be a trivial enhancement, and it might require careful consideration to ensure it aligns with the vision for the plugin. However, I believe it would be a valuable addition that would make the plugin even more powerful and flexible.

This issue content was generated with the assistance of ChatGPT-4 by OpenAI.