search

elastic / search-ui

Search UI. Libraries for the fast development of modern, engaging search experiences.
https://docs.elastic.co/search-ui
Apache License 2.0
1.92k stars 368 forks source link

How easy is it to integrate with Tailwindcss ? #954

Closed Christophvh closed 1 year ago

Christophvh commented 1 year ago

Hi,

I have read the docs on custom CSS but it seems to rely very heavily on 'overriding' styles with predefined names. I would like to use Tailwindcss and was wondering how hard is it to add tailwind-css classes on each of the provided components directly instead of in a separate CSS file.

Since tailwind is very popular it might be nice to add a guide to the docs just like the NextJS guide.

chriscressman commented 1 year ago

I didn't analyze this enough to estimate effort, but I thought about what would be involved:

Each Search UI component has a containing element, whose class is accessible through the className attribute in JSX. However, to manipulate the class of "inner" elements, you'd need to provide a custom view component. To preserve functionality, each view component must re-implement a portion of the default view component it is replacing (for example, any aspects that set up state and manage state).

A custom view component gives you full control of the DOM elements at the expense of creating and maintaining the component.

botelastic[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.

Christophvh commented 1 year ago

Adding an example to the docs on how to achieve this might be useful. Tailwind is very popular.

Related 820

botelastic[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.