I'm using tailwind in my React project. The issue I've come across is that I can't use tailwind arbitrary classes(e.g. p-[115px]) without restarting the server. Although I've added mode: 'jit', to my tailwind.config.js but the issue still persists.
And the second thing is whenever I edit my code, it gets updated in the browser but I still have to refresh the page for inspecting my code and that gets annoying while debugging. Please suggest me solutions regarding these problems.
Note: I'm having "tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.7" in my package.json.
Related
So, can anyone tell me why tailwind fails to render any changes or apply the style after a while. In the image below I changed the background of the div to red; however, the change did not take affect. More importantly the content of the page does not display as it should.
I have updated VS Code, I have had this problem in Webstorm as well. I closed and opened the terminal. Closed and opened the the application. Updated and restart my computer, on two different computers. This happens when I create a whole new folder and create a a new file and write the code from scratch like here in folder "test2".
It seems to stop rebuilding after a while.
I am not sure what the solution to this is. Can someone please help me solve this problem?
second update: I solved the problem by adding the file to the content section of the tailwind config file sigh
I currently have a NuxtJS (VueJS) project with Tailwind in it (latest versions).
I am using PhpStorm as editor.
For some reason I have no auto completion of suggestion for Tailwind CSS.
I have tried a lot of different things (anything I found on Google) but so far nothing helped.
Can anyone help me to find out what is wrong and how to fix this?
Latest thing I tried was a npm ci and Invalidate Caches/ Restart in PhpStorm but that did not help unfortunately.
I am using the latest version of PhpStorm.
Are you using "jit" mode? With it, code completion list is very limited, most of applicable CSS classes are not suggested. This will be fixed in the scope of WEB-50318, please follow it for updates.
Note also that, when using latest tailwindcss versions, the completion includes unrelated CSS classes from some *.test.css files. This will be fixed with the next tailwindcss package update, see https://github.com/tailwindlabs/tailwindcss/issues/4393. Workaround: delete node_modules/tailwindcss/jit/tests/ folder, it's not needed.
Ran into this problem with WebStorm and the previous answer diddnt solve my issue. However, I was able to solve it by instead of using mode: 'jit' in my tailwind config, by adding the --jit compiler option. Restart WebStorm afterwards.
Hi I am an android developer and haven't much knowledge about web, I purchased this App and it has a web back-end, it working pretty fine when I run it local like this,
but when I run this via hosting , I am getting this. link
After going through some search I found that these are some sort of Angular tags, as I already have mentioned that I haven't knowledge about this, How do I solve this?
It's happening due to hosting or path resolution issues.
None of the JavaScript files are getting loaded due to which the page is breaking and hence you are seeing raw code.
Fixing the proper loading of JS should fix the page. You might need to tweak it further in case relative path's are not loaded correctly.
Overall, it is not a code level issue yet.
Below is the screenshot of the hosted link you shared.
I'd like to make a disclaimer that I'm brand new to both CSS and Wordpress.
I've been using "Google Inspect" to edit the CSS of my Wordpress site. Everything looks like it is working well as I'm making the changes but the second I refresh the page it reverts it back to it's original formatting.
I am using this resource but the solution he came up with still doesn't seem to work for me.
Right now I am:
Saving my CSS
Making changes to the CSS
Saving my CSS again
Refreshing the page with no luck...
I'm not sure if there is any other information that I can provide. Let me know if there is and I'll update this post.
Any help would be greatly appreciated.
after reloading your change CSS code not working because it's either not saving to your CSS file or you may have to clear your browser data
Try viewing your page in another browser or incognito mode. This will force your browser to refrain from using any pre-cached versions.
Additionally, I would highly recommend using child themes when modifying your wordpress CSS. This will prevent your stylesheets from being overwritten when wordpress updates.
ok, maybe I'm wrong here, but it sounds to me like you are just not saving the stylesheet (which holds all the CSS of your site) correctly.
Perhaps I can summarize the technique from the other post quickly:
Open the browser element inspector and make your css edits.
Navigate to the css style sheet in the inspector and save the file
to your computer as style.css in your theme folder
Refresh the page and hope to see the changes.
This is making some assumptions I'm not sure are happening in your case:
This will only work if you are doing this in a local development
environment OR you are FTP'ing this style.css file to your server.
You aren't making any changes to currently unstyled elements. The
web inspector will add these as inline styles and they won't be in
said stylesheet.
I don't mean any disrespect by this whatsoever, but you will save yourself a ton of pain and suffering by learning how to do this right the first time.
Download:
Atom - Code editor
Desktop Server - The free version
Learn how to use those to create a local development environment and then use Atom to change your CSS.
I have created a website, debugged it in Visual Studio by using the "view in browser" feature, and decided it was ready to be deployed onto our test server. When I debug the program from Visual Studio the contact page has elements that look like this:
When I go to the address of the website on the server, it displays like this:
The star is a glyph-icon from Bootstrap tools that were already on website's solution when I opened it (someone else made the solution). The code for this section of the site is below:
I tried to find information about why this isn't displaying correctly, but was unable to. Without knowing anything about the server, what would you recommend me checking or changing to resolve this issue?
Edit: I think it is worth mentioning I have tried both Chrome and IE and get the same results on each of them. Trying to run the page in compatibility mode hides the glyph-icon star all together.
I believe the issue ended up being browser-related. I was using a newer version of IE than what we had on our server so my elements were displaying differently because something I had previously done was unsupported by the older version.
I corrected this issue by nesting the span glyph-icon elements inside of the proper header tags and using margin-left: style property to space them out properly.