Skip to content

feat: Inject css styles into config viewer <head> - #101

Open
jimmzzz wants to merge 1 commit into
rogden:masterfrom
jimmzzz:inject-custom-css
Open

feat: Inject css styles into config viewer <head>#101
jimmzzz wants to merge 1 commit into
rogden:masterfrom
jimmzzz:inject-custom-css

Conversation

@jimmzzz

@jimmzzz jimmzzz commented Jul 10, 2024

Copy link
Copy Markdown

What does it solve?

issue: #86

Inject custom styles into <head>

This is useful in cases when you want inject css file with CSS variables and display them in tailwind-config-viewer

Alternative to themeReplacements

  • when you got variables defined in CSS file and not in JSON.
  • possible to define CSS variables for dark mode and display them when the user toggle mode in viewer

How does it work

  1. User define [name].css file in project
  2. add arguments -css <path to file.css> - default path is ./style.css
  3. App requests CSS file served on /style.css
  4. If file exists -> injected into <head>
  5. Colors and other properties are displayed correctly

example: tailwind-config-viewer -o -css ./css/my-variables.css

Caveats

  • for defining variables in dark mode they must have .mode-dark class name defined (class in viewer which is toggled in viewer) in custom css -> i didnt find any useful/versatile way how to handle this.

Possible future improvements:

  • link css files from external url

Feedback appreciated :)

@rogden

rogden commented Nov 21, 2024

Copy link
Copy Markdown
Owner

@jimmzzz Thanks for this PR. I'm in the process of a refactor to Vue 3 and removing / upgrading old dependencies. Once I'm through that I will dive into this. Thanks for your work!

@thejspro

thejspro commented Jul 3, 2025

Copy link
Copy Markdown

Can we just merge it?

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.

3 participants