## Overview I have run into an issue with tailwind styling overriding theme level CSS. Once a user adds a code component it adds the tailwind styling to the canvas page. In my specific case it is overriding my base styles in my _base_ css layer. I have tried moving my CSS onto different layers in my defined layer setup but there are conflicts so they kind of merge together with the layers defined by canvas. Below is my layer setup compared to the canvas one in the declaration order. | Mine | Canvas (tailwind) | | ---------- | ----------------- | | reset | theme | | base | base | | components | components | | overrides | utilities | | | reset | | | overrides | AS you can see it looks like the Canvas one is not in the right order (I could be wrong). This could be a pretty easy fix by just defining the layers in the order they should be in before they are used. That would be a good enough change to put this issue to bed I think. Further to my observations above, once I deleted all the code components and clear the cache the tailwind stuck around. I'm not sure if this is intended but it seems a bit heavy handed on the cacheing maybe? I also tried to solve this my moving where my CSS is loaded in my library, `base` to `theme` this had no effect. ## Caveats - I'm using a `:where()` selector to style things at the base layer of our theme. Which is one of the reasons why its being run over by tailwinds base styles. My current work around is to remove the `:where()` selector but this feels like being punished for being right. - I could be doing something silly and wrong, which I'm very happy to be told thats the case :laughing: ## Possible solutions Roll some CSS that prepends a tailwind injection that defines the intended order of the layers. Update how that stylesheet is cached or injected into the page even when there are no more code components