-
Notifications
You must be signed in to change notification settings - Fork 4.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Inconsistent results with color values #2008
Comments
Disconsider my previous comment. Try to update your Tailwind version (you're using 1.4.2) and see if the error persists. Also, if you have a repository that we can reproduce the issue, it can help a lot. |
@estevanmaito Hi there, thanks for your reply, I appreciate it You know, I have no idea why I said 1.4.2, because it is 1.4.6. The purging is definitely happening, it just seems to be purging too much. In terms of getting a repo together, because of the structure and requirements needed for a Vue Storefront project this might be a bit difficult to put together, I will see if I can setup a basic Vue project with my tailwind config and see if I can reproduce there though |
OK, I have set up a test repo at https://github.com/hellomikes/tailwind-demo Now, of course this is working as expected so will probably make me look like an idiot, however it contains my tailwind config (modified the path values in the purge object to match this new structure), as well as some sample components I have currently. To give an idea of the output I am getting after purge, this is how the 'Fencing' column in my repo currently looks (I've highlighted it to show that there is actual text there and it's not just an image Another difference I have is that I am initiating tailwind through webpack rather then the PostCSS config file:
But I don't think this is an issue - it all loads, it purges, it just doesn't seem to pick up everything. I appreciate that this isn't a like-for-like reproduction, however if the issue sounds like anything familiar I'd be happy for any advice Thanks again |
OK, I think I have a theory for this, I just want to see if anyone else agrees with it? If I add classes to an element (i.e. .margin-bottom-med {
@apply mb-0;
@screen md {
@apply mb-2;
}
} and then apply this class, it loads straight away. HOWEVER, if I restart my local dev server, the original tailwind classes are applied. Likewise I have done a deployment to our production server, and the classes seem to be displaying now. Is anyone able to confirm if this is a feasible reason behind what is going on? Does the server need to fully re-build in order for the purge list to update? If this is the case then my question is, is there any way around it? We have about 90% of our content coming from blocks sent via an ElasticSearch API, and so we ideally want style classes to be applied as and when we need them. If this is not possible, what do we think the best solution would be, as ideally we want to purge stuff but don't want to write an allow list with everything we need. Do people think it would be best to write CMS friendly classes and apply the styles, so rather then people adding On a related note, I have set up a test demo repo if anyone wants to try and verify this - https://github.com/hellomikes/vsf-tailwind To get started, you will have to do a Again, I appreciate anyone whoe has any time to help out with this |
Your CSS is purged at build-time, so if your content is changing dynamically at run-time you are probably out of luck. You would have to rebuild your CSS every time the content changed, or you would have to safelist a set of classes that people are allowed to use in dynamic content and make sure those are never purged. Going to close this as nothing we can do about it I'm afraid, but feel free to open a discussion to continue discussing this topic if you like 👍 |
Hi @adamwathan Thanks for the reply, I really appreciate it. It also sort proves that I knew what I was talking about when coming up with my theory, so even better! I'm happy to open a discussion about this because I really want to understand what the best practice is with situations like this - surely in the age of JAM stack and headless CMS's there are people out there who are using Tailwind within content managed markup, so would be good to try and find some general consensus as to what should be done Thanks again! EDIT: Sorry, I am the same person, this is my personal github as opposed to my work account |
Hi
I'm having a nightmare with trying to get colour values to work with a site I'm working on
I've upgraded to v1.4.2 today (having been working on 1.1.2 up till then) as I've been having issues with my implementation of PurgeCSS. I am now using the configuration built in with Tailwind (great addition btw) but it's now giving me really inconsistent results with purging classes, particularly colors.
This is an example of the colors object I have in my tailwind config:
Now, some of the colors work for things such as
bg-*
,border-*
etc., but some of the colors don't get applied at breakpoints (md:
), and some colors don't display at all.When using 1.1.2 I had to construct a custom exclude list for PurgeCSS to get some of these colors to work, and I was hoping that I wouldn't have to do that now (hence my upgrade), however I'm now completely stuck for what to do. For example, the following doesn't render as expected:
It will only apply the
bg-category-alpha
class, however if I replace that withbg-brand-light
orbg-category-beta
, that class will be applied.I really am at the end of what I can do to sort this out, so if anyone has any idea of anything I can do I would be grateful as the project is very late in the process to think of alternate solutions.
To give some context to the project setup, it is a Vue Storefront project, with some classes hardcoded into templates/components, and some coming from a data API that is applied to the markup via
serverPrefetch()
and generated with Vue-SSR. Hardcoded and API-driven classes produce the same inconsistent results.My purge object:
If there is any other information I can give please ask and I will happily provide
Many thanks
The text was updated successfully, but these errors were encountered: