Detecting non-existing color e.g. bg-foo?

[knitevision1]

Let's say I'm using a color in my HTML Templates that doesn't exist in my tailwind config

<div class="bg-foo text-bar" />

Is it possible to use PostCSS or another tool to detect that bg-foo doesn't exist in my Tailwind config and output some kind of a warning? Ideally using CLI checker.

[rozsazoltan]

Yes, it's possible. For example, you could write a PostCSS plugin that receives all existing colors and specifies that the counterpart of bg-*(space), bg-*" , bg-*' can only come from the color array. I think it's too much effort to track down improperly used utilities. It's simpler to avoid using them from the very beginning.

Overall, such a script doesn't have much practical use, and you can easily have an arbitrary value that also doesn't exist, which is very hard to detect from the source, like bg-(--foo). Plus, it takes too much effort - essentially just to remove unused classes from the source that shouldn't have been there in the first place.

In the case of bg-* and text-* (or border-*, ring-*, etc.), we're not just talking about colors. For example, with text-3xl, you first have to decide that 3xl is not a color, but you don't want to delete it, so it gets pretty complicated. I'll repeat myself: don't use bg-foo if you don't have --color-foo, and there's nothing to discover. If you end up using a non-existent utility, it fortunately doesn't cause any errors in production.

[rozsazoltan]

Perhaps you could use the generated CSS to filter out all classes that don't have any properties in the generated CSS. For example, sticking with bg-foo, I would remove it from the source automatically if .bg-foo { ... } doesn't exist in the generated CSS beforehand.

For this, you need to detect the class names in the source - for example, collect them into an array - then iterate over the array and check if they have any properties in the generated CSS. Any class that doesn't should be removed from the corresponding file entirely (here, you should pay attention to spaces and different types of quotes to ensure you only remove them from strings).