Elements disappear

Open
#7 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
25/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
tailwindcss
Domain
frontend, tooling

Research direction

Start with the custom tailwind.config.js, the darkMode: 'class' setting, and the Alpine.js x-on:class binding shown in the HTML snippet. Reproduce the issue by switching the Moon icon and inspecting elements, then narrow down the circumstances that make other elements disappear. Done means a reliable reproduction and a confirmed cause or clearly documented compatibility limitation.

Written by the indexing model from the issue text.

Description

bug

I'm not sure you would class this as a bug, or it's a compatibility issue - but it's driving me bonkers.

  • I'm using custom tailwind.config.js
    • darkMode: 'class'
  • alpine.js

My account on beyondcode - doesn't find the email my license was sent to, so can't PW reset, so i've signed up a new account and linked my GH profile, so you can verify the license with me directly.

Before activation:

image

If for example, I click on the "Moon" SVG icon (switch from dark / light mode) and inspect element.

toggle a class such as hover:text-gray-600

I loose other elements

image

I have had a hard time trying to replicate exact reproducible steps, as sometimes it works and sometimes it does the above. - under what circumstances I have no idea.

The only significan't things i'm using is TW darkmode class and alpine.js binding to x-on:class binding (but I would presume it ignores this)

<li :class="{'text-sm xl:text-lg hover:text-blue-400': $store.navPage.page !== 'home', 'text-sm xl:text-lg font-bold underline underline-offset-4 decoration-blue-500': $store.navPage.page === 'home'}" class="text-sm xl:text-lg hover:text-blue-400" data-tw-selected="1648081575803"><a href="/index.html" data-tw-selected="1648081573434" class="">Home</a></li>

Alpinejs class binding is no different to using Vuejs v-bind:class=

this might not even be the issue, but the only difference in standard css implementation that is in use.

Dominant language
No language data
Stars
5
Forks
0
PR merge metrics
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from beyondcode/devtoolsfortailwind-community

All issues in beyondcode/devtoolsfortailwind-community

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.