Skip to content

Support customization via CSS custom properties #49

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

Conversation

jonathanhefner
Copy link
Member

This is an alternative or supplement to #14. From rudimentary testing, evaluating a tailwind.css.erb file is extremely slow (10+ seconds). Sprockets will cache the output so that the cost does not need to be paid for every request, but that also raises the issue of cache invalidation. Using CSS custom properties sidesteps these concerns.

There is a larger question of which customizations to support via CSS custom properties. Font families are an obvious and simple choice, which is why I've started with them.

In contrast, there are a few dozen spacing values, and full customization thereof would be more cumbersome. Also, speaking as a non-designer, the value of customizing them seems questionable, since they are already expressed in rem, and there is a clear linear relationship between them.

The choice for color customization is less clear. Note that the default Tailwind color palette is all handpicked, because generating shades algorithmically currently yields suboptimal results. So whatever customization mechanism we provide would likely need to support specifying multiple shades. Also, speaking as a non-designer, the value of overriding concrete colors (e.g. blue-500) seems questionable. On the other hand, the ability to specify abstract colors (e.g. primary-darker) seems valuable. Vanilla Tailwind doesn't include such abstract colors, but we could still make them a part of our offering and let the purger strip them away if they go unused.

One more area for customization is the tailwindcss-typography plugin. It provides many low-level configuration options. At some point in the future it may provide higher-level configuration options, but we could provide our own in the mean time. For example, --tw-prose-color and --tw-prose-heading-color variables.

@jonathanhefner jonathanhefner changed the title Customization via css custom properties Support customization via CSS custom properties Feb 25, 2021
@dhh dhh closed this Aug 18, 2021
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 this pull request may close these issues.

2 participants