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

Live server and generated website use different tailwind colors #384

Open
precompute opened this issue Nov 22, 2022 · 3 comments
Open

Live server and generated website use different tailwind colors #384

precompute opened this issue Nov 22, 2022 · 3 comments
Labels
Design UI design

Comments

@precompute
Copy link

Describe the bug

The live server and the generated website use different colors from tailwind.

reference: https://tailwindcss.com/docs/customizing-colors

color hash
server emerald #d1fae5
generated green #dcfce7
color hash
server amber #fffbeb
generated yellow #fefce8

Specifying "green" in the yaml file makes the live server use the color "emerald", but the generated website uses green.

Does not seem to affect the color blue for some reason.

It might affect more colors than green and yellow.

Example:

Using the docs/ folder in https://github.com/EmaApps/emanote/

Build the website, and run a live server with emanote run --port=8081

Open these two pages:

https://emanote.srid.ca/guide/yaml-config
http://localhost:8081/guide/yaml-config

Desktop (please complete the following information):

  • Browser : Firefox, Brave
@precompute precompute added the bug Something isn't working label Nov 22, 2022
@precompute
Copy link
Author

precompute commented Nov 22, 2022

Oh, I guess this is a discrepancy between tailwind versions. https://v2.tailwindcss.com/docs/customizing-colors says green=emerald and yellow=amber, but now these are different colors.

Specifying Emerald / Amber in the YAML breaks styling in the live server (no colors (white) or something else), but the generated website uses Emerald / Amber correctly.

@precompute
Copy link
Author

A hacky workaround for this is to add the following to templates/hooks/more-head.tpl:

<script src="https://cdn.tailwindcss.com"></script>

@srid
Copy link
Owner

srid commented Nov 23, 2022

Properly solving this (and #118) will require support for compiling Tailwind on the fly in live server of Ema: srid/ema#20

In the interim, perhaps we can allow disabling compiling Tailwind (so CDN is used) during static generation, e.g.: emanote gen --no-tailwind-compile .... Or it can be specified in index.yaml.

https://github.com/EmaApps/emanote/blob/3300092d40c9092e33a6b22e53a30a2a82796138/src/Emanote.hs#L87-L88

@srid srid added Design UI design and removed bug Something isn't working labels Nov 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Design UI design
Projects
None yet
Development

No branches or pull requests

2 participants