Create a demo site

[JNavith]

Since this plugin is all about visuals, it'd help a lot to have a site showing off just what this plugin can do 😎

• [ ] Fix a scrolling bug on (Windows?) Chrome
• [ ] split into pages
• [ ] choose your path as described below (requires semantics to be fully implemented)
• [ ] reference it in the README
• [x] replace green check mark, yellow circle, and red x emojis with similarly shaped and colored custom icons
• [x] replace warning with "watch out" or "be careful"
• [x] replace light bulb with "think about this" ("consider the following" will not be good)
• [x] landing page
• [x] https://github.com/JakeNavith/tailwindcss-theme-variants/issues/3#issuecomment-704504075

[JNavith]

On the homepage, have two buttons for a "choose your path" where the first option is marked as recommended for people who want to write classes like light:text-green-900 dark:text-green-100 because it's similar to the official Tailwind CSS solution (darkModeVariant). This is the variants approach and it sets up knowledge for path 2.

The second path is for people who want to use the semantics feature: to write semantically / meaningfully named classes like text-accent and says that pre-requisite knowledge from path 1 is very very strongly recommended.

[JNavith]

Features (goal: 6) to brag about: • Infinite browser support (since IE9) (provided you use supported media queries and/or fallback; because there are no custom properties required (except where you disable non-variable semantics)) • Support for every utility (cause that's how variants work B) • Powerful fallback feature • Always stick to your design system (because values must be taken from your Tailwind theme config; no random hex codes) • Semantics to make themes easy to set up and work with (this is part of sticking to your design system)

[deadcoder0904]

Wow, definitely using this one. One quick note: Sidebar is way bigger (it's like 500px or more) & the main content is smaller. I was looking at the table comparison with other libraries & had to scroll way too much to find this library in the table. I'd appreciate to see more main content than sidebar or make the sidebar toggleable :)

Gitbook is a good example on sidebar & content → https://docs.gitbook.com/ or just see Tailwind → https://tailwindcss.com/docs

See for yourself:

[JNavith]

Wow, definitely using this one. One quick note: Sidebar is way bigger (it's like 500px or more) & the main content is smaller. I was looking at the table comparison with other libraries & had to scroll way too much to find this library in the table. I'd appreciate to see more main content than sidebar or make the sidebar toggleable :)

Gitbook is a good example on sidebar & content → https://docs.gitbook.com/ or just see Tailwind → https://tailwindcss.com/docs

See for yourself:

Hi, thank you for your interest in the project! The main "article" content is locked to a readable width because of https://github.com/tailwindlabs/tailwindcss/pull/2574. What are your thoughts on that?

[deadcoder0904]

Hey @JakeNavith I think it's absolutely correct for articles to be 65ch as all designers say that. It makes the article easily readable.

But I think as this isn't a blog post rather a docs, I'd generally copy popular sites docs like Gitbook & Tailwind mentioned above.

The sidebar should be a certain width & even 300px looks like a lot & the demo site currently is 500px on my Mac.

In any case, I'd prefer Gitbook or Tailwind-style as it's more readable & looks clean. Yours is readable as well. Just the sidebar looks weird & the comparison table contains too many things. And please put your library in the 1st column in the table as I had trouble finding it :)