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?