I have a FOUC on the production page of a site I'm working on using NextJS and TailwindCSS. It exists in varying degrees across browsers, but it seems to be worst on Desktop Firefox. You can view it here: Bretton Does Nails
From what I've found I may be able to fix it by configuring a _document.js file, but I'm not sure how to set that up to work with Tailwind specifically.
Does anyone have any suggestions of how to fix this or resources I can check out to figure out how to try the custom document?
Related
I have had a big problem for some time now.
I'm working on ReactJS with Material-UI, I have a library (which I build with webpack) and then use it on my projects.
The problem is that in local or on StoryBook, the style renders perfectly well. But when the library is built and added to my project via my package.json my style does not apply.
I override the style directly on my css file and I don't go through withStyle/useStyle/makeStyle. I know this is the right way to do it but unfortunately the project was already like that when I got it back
On StoryBook:
And prod:
If anyone has a solution or has seen this somewhere?
Thanks
I tested a React app design using css and bootstrap in Code Sandbox (online editor).
The problem is, when I copied the files to a real react app in my computer, the page styling is different than what I designed in code Sandbox.
Is there anything missing I have to add to my code?
The style in Sandbox..
The style in my computer browser..
I found the solution.
The problem is when uploading the files from CodeSandBox, the css file has the line,
#import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-
reset/2.0/reset.min.css");
removing it solved my problem.
I have installed the Loox app from shopify (https://loox.app/) on shopify's minimal theme. Their app is overriding my css code and resetting to their default code when I try to change it. How do I override their css so mine takes over and I can style it on my page the way I want?
** I have tried !important and does not work
You can always ask the App developers to fix their App so it does not break your theme. You can always uninstall Apps like that that break your theme. Complain to Shopify if you get no traction with them. Basically, Apps should never cause your theme to change and look bad, if they are designed correctly.
I am working on a reactJS application that uses ant design for the UI. Recently we released this application to production where the computers are pretty locked down. This application is an intranet application and these computers have no internet access. So, because of that, the ant design icons on the modals were showing up as empty boxes. I did some digging and saw that the icons are using CSS classes.
For example, this is the CSS class for the red error "X" on the error modal:
.anticon-cross-circle:before
{
content:"\E62E"
}
I'm not too familiar with the CSS content attribute so I went to www.w3schools.com and read up on it a bit and tested this particular content value on their Try It page for this attribute and I got the empty box that I got in my production environment.
Does anyone know what needs to be done to import these icons into my project so that they can be used offline?
Thanks
What I think is happening is that Ant Design is defining the CSS font definition with a URL to the corresponding font-file. Since the computers are offline, it cannot find those definitions.
In the documentation I see that they also provide SVG Icons, which should work completely offline. I think this is worth a try. The steps to implement this can be found here and it should be available from version 3.9.0: https://ant.design/components/icon/#SVG-icons
Have you tried downloading the icon library into your project folder?
https://github.com/ant-design/ant-design-icons/tree/master/packages/icons-react. Looks like they have assigned their own codes to their own icons so you'll need to have them offline.
You will nessd the css file tabler-icons.css and the woff file tabler-icons.woff and assign a font-family named tabler-icons within your style.css using #font-face
I'm using Chrome's Lighthouse audit to make some performance improvements to a website and there are some styles under the "Remove unused CSS' section that I cannot locate anywhere on the site.
The ones I am questioning are the 2 lines starting html, body etc.
They look a bit like reset styles but aren't the ones I have in the CSS file.
I've tried searching the theme files (this is a shopify site), the page source, turning off javascript and these styles don't show up anywhere.
Has anyone encountered this before?
Since it's a Shopify Site it's using the Shopify style CDN by default. Since it's a CDN the css files are not going to be found in your project directory but rather on Shopify's website. An example of a style CDN can be found here, this one is for bootstrap.It uses a URL to access style options that are stored on their servers so you don't have to download the CSS locally.
Here's more on CDNs.
As for your issue, it looks like your project is referencing these CDNs but you're not using them. If you can find where in your project these CDNs are linked and remove them/comment them out it should resolve the issue.
Here's a similar question about whether or not it's safe to remove unused/deferred styles for Shopify.