While using Next.js + Tailwind + DaisyUI in development on Mac everything works as expected and all styles look normal, however when developing on WSL I noticed that my styles look very different and are pretty much broken from what I would expect. I'm encountering this same issue when deploying my site to Vercel. Does anyone know how I can resolve this?
Development (Mac)
Deployment (Vercel)
tailwind.config.js
I attempted to recreate the issue on my mac with no luck, however it seems this issue is showing up on Linux and Vercel deployment.
Update:
Turns out the issue stemmed from the fact that I had a css file in my styles folder and when I imported it into my homepage, it messed up the styling for everything else.
Not sure if this is supposed to be the expected behavior, but it did solve the issue
Related
In my local development environment, everything works as I intended. However in after running yarn build all of my styles are way different. I used create-react-app to set up the project, and I am using regular CSS to style it.
here is my file structure
and here is an example of what I am talking about.
and here
turns out there was nothing wrong with my code I was just zoomed in 500% so embarrassing
after upgrading Angular from version 8 to 11, fonts are looking different, they are blurred. Any ideas what can I do/check to make them look the same as they were before? Any help would be appreciated. When I run app locally, it looks better than on deployment environment.
You might be hit by something similar to this issue.
There is a new optimization for fonts - external font definitions are inlined as part of the production build. According to the bug above, it might not work in some cases.
Try disabling the fonts inlining optimization in angular.json - https://angular.io/guide/workspace-config#fonts-optimization-options
I am using Bluehost hosting for a WP site using a Foundation 5 theme called JointsWP, and have been using compass to try and compile the .scss styles. It shows as compiling and initially made a few changes in relation to the body styles of the site, but once I started to modify the header styles, it seemed to no longer work. I have tried uninstalling and reinstalling the gems, downgrading to lower versions of both Sass and Compass, and I can't get it to work.
It sounds like you are attempting to compile Sass on a server - this won't be possible. When working with Sass you need to work locally and then push your updates to the server.
I am running Debian Wheezy. I am playing with gulp last few days. My problem is that when I point browser to file directly (file:///...) source maps linked correctly like this:
But when I point with localhost/... I get this:
On Iceweasel everything works perfectly. I triple checked all settings, so that part is OK. I thought it might be some security issue, so I chmod recursively project root, but that is not the issue.
This is my folder structure:
This is my gulpfile.js:
I got scss files that look like this:
index.scss
_test.scss
When I run gulp command on root folder I get:
index.css
Can it be some Chromium issue? I tried doing almost everything I could think of. The fact that it's working on Iceweasel makes me think it's specific Chromium problem, but it's so hard to give up. :D
I had experienced the similar issue, especially with BrowserSync.
Version Info:
OS X El Capitan#10.11.12
Google Chrome#47.0.2526.80 (64-bit)
browser-sync#2.9.0
Description
Chrome could not autoload Scss sourcemaps watched by BrowserSync, while Chrome private mode, Chrome Canary, Safari works with Scss sourcemaps correctly whether using BrowserSync or python simple HTTP server command line.
The solution may be specific to my case. I tried Google Web Starter Kit(#0.6.0)'s Service-Worker previously, so I went to chrome://serviceworker-internals and unregistered items listed in that page.
It's done. Soucemaps work as expected again.
Try adding your local folder in chrome workspace. Here is a perfect tutorial on enabling and using workspaces:
http://www.sitepoint.com/using-source-maps-debug-sass-chrome/
Hope it helps.
I have a Ransack search and Foundation in my Rails app and locally css renders ok while the same app in production has a quirk:
other things in the app are exactly the same.
I tested in Chrome and Safari - locally ok, production not ok.
Where can I start troubleshooting this?
UPDATE: I tried to run in production locally (assets:precompile) and it's the same as on the server... so how come asset compilation can change something?
One of the sites probably has a global css selector that set the margin or padding (can't really tell from your example).
Go to the production site and inspect one of the elements. You should see a difference in its computed style.