Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Flowbite to project #182

Closed
reefdog opened this issue Apr 18, 2022 · 1 comment · Fixed by #195
Closed

Add Flowbite to project #182

reefdog opened this issue Apr 18, 2022 · 1 comment · Fixed by #195
Assignees

Comments

@reefdog
Copy link
Contributor

reefdog commented Apr 18, 2022

We're using Tailwind CSS, and were discussing the cost:benefit of using a component library like Tailwind UI or Flowbite.

We've decided the licensing around Tailwind UI is concerning: they claim it's perfectly valid to use their components in an open-source project, but with a list of restrictions on use that mean it's only actually as safe as they make it. (If we use every component in the library, and someone looks through our markup, extracts each component, and creates a library… have we enabled a violation of the license? Obviously not, but it'd be no fun to prove it!)

So, while Flowbite is not as polished as Tailwind UI, the non-Pro version is actually MIT-licensed and safe to use in our project.

This issue is for adding the actual library to the project.

@reefdog reefdog self-assigned this Apr 18, 2022
reefdog added a commit that referenced this issue Apr 27, 2022
This commit installs Flowbite, without actually using it yet.

#182
reefdog added a commit that referenced this issue Apr 27, 2022
In order to make Flowbite work with Turbo, we have to patch it to listen
for `turbo:load` rather than `DOMContentLoaded`.[^1]

This commit adds the patch-package Node package and its `postinstall`
Yarn script, along with a patchfile specific to Flowbite 1.4.3.
Developer instructions for why we’re doing this and how to update the
patchfile in the future have also been added to `DEVELOPMENT.md`.

#182

[^1]: themesberg/flowbite#88
reefdog added a commit that referenced this issue Apr 27, 2022
Now that it’s installed and patched, this commit actually makes it
available to the app by importing it to our application.js and extending
our Tailwind installation with Flowbite’s additions and overrides.

Delivers #182
reefdog added a commit that referenced this issue Apr 27, 2022
This commit installs Flowbite, without actually using it yet.

#182
reefdog added a commit that referenced this issue Apr 27, 2022
In order to make Flowbite work with Turbo, we have to patch it to listen
for `turbo:load` rather than `DOMContentLoaded`.[^1]

This commit adds the patch-package Node package and its `postinstall`
Yarn script, along with a patchfile specific to Flowbite 1.4.3.
Developer instructions for why we’re doing this and how to update the
patchfile in the future have also been added to `DEVELOPMENT.md`.

#182

[^1]: themesberg/flowbite#88
reefdog added a commit that referenced this issue Apr 27, 2022
Now that it’s installed and patched, this commit actually makes it
available to the app by importing it to our application.js and extending
our Tailwind installation with Flowbite’s additions and overrides.

Delivers #182
@reefdog
Copy link
Contributor Author

reefdog commented Apr 27, 2022

I wanted to document here in this issue that getting Flowbite working involved two headaches:

  1. Flowbite's JavaScript-using components (like Modal and Dropdown) are currently incompatible with Turbo. They initialize on pageload, but upon first Turbo-fired page navigation, they stop working. Resolving this required patching Flowbite itself (034c8c5).
  2. Using Flowbite — which extends Tailwind CSS itself — ultimately necessitated ditching the Rails 7 import-maps lifestyle in favor of standard JS/CSS bundling (Revert back to jsbundler/cssbundler #191).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant