Invalid value detection

[Alpha1337k]

Hi there,

I created an addition to the extension that checks for invalid tailwindcss values. I think it could help novice programmers debug their css quicker.

Screenshots:

In code:

In problems:

Quick fixes:

It's currently in mvp state, but if you want we can make it 'production' ready.

If you are not interested, no problem, did this for my own learnings anyways :P

Thanks,
Alpha

[adamwathan]

Cool idea! How do you think it should work alongside custom CSS? You might have a class like calendar-button or something that you need because of some third-party UI component you're using and I think that would currently be treated as an error 🤔

[Alpha1337k]

Yes, currently all non tailwind classes get flagged as errors.

The perfect solution would be to get all the css classes in the project and compare against those. However, I don't think thats possible (?).

Solution 2 is to only flag errors where we are N% sure that they are related to tailwind:

• bg-gree would get flagged, because it looks like bg-green
• calendar-button would not get flagged, because it looks very little like an tailwind class.

Furthermore, we could implement an ignore quickaction. Kinda like this:

What do you think?

[Alpha1337k]

Hi @adamwathan,

I finally had some time to add the ignore feature; The ignored keys get stored in the workspaces settings.json file, just like e.g CSpell. For me this works great!

Please take a look again and let me know what you think.

Thanks,

[Alpha1337k]

Hey I completely forgot about this pull request but it seems no one has looked at it yet. @thecrypticace could you take a look?

[RafalFilipek]

What if we just inform users that there are custom elements? We don't have to assume that every unknown element is an error.

If a project is using Tailwind, I think it's safe to assume that generally Tailwind classes will be used. From my experience, all I need is quick feedback that I have a custom element.

This is quite similar to how CSpell is working in VSCode.

From here we can think about some extra heuristics or options regarding detection etc.

[cloud-walker]

This would be perfect for maintaining design system libraries based on tailwind (to ensure a good DX for the app developers, deprecating tokens, adding new classes, and so on), this is still in the plans in any way?

cc @adamwathan