Really, I can't find the problem because for the same div some classes are working and some are not.
I tried to find some clues but most users didn't have paths in the tailwind config file.
My code:
fixed is working fine, but bottom-2 and right-4 aren't. Actually, I don't know if w-[405px] is working.
Add mode: 'jit', to your tailwind.config.js in order w-[405px] works. I think other classes is working you just didn't noticed it or maybe conflict on other styles in your div.
You could try vimesh style. It watches all html element class attribute changes and generate tailwind compatible css at runtime. Just add
<script src="https://unpkg.com/#vimesh/style"></script>
at the head of your page.
We use tailwind at work, not something I'm super in love with but if we're adding tailwind classes that haven't been used in the document yet we have to do it locally for the compiler to add the new classes to your document.
Unsure if this is the only way to do it as its fairly new to us, but if you bring your project to a local environment and use the command
npm run watch
it will signal to tailwind to watch your class names and add the new ones to the compiled list. so if your making custom ones using [] its likely that tailwind hasn't addded those instances to the minified version of their css
For real I dont find how to resolve it. But in my case I just added the same classes to component and after it tailwind started to see it. If someone knows why exact its happening Im still waiting for any ideas
Related
I was working on a nextjs project where I was asked to add an external script that dynamically creates nodes using vanilla js (createElement, setAttribute, etc.). I couldn't help but notice that the global css imported at the top of my _app.js did not affect these dynamically created elements at all. I tried importing the css many different ways but couldn't get the nodes to be repainted without modifying the external script and dynamically adding the styling there.
Does anyone know why exactly these nodes aren't repainted by the imported css and how to import them / configure next in a way where they are ?
Thank you !
P.S: script works and is imported in , tried importing css in too without luck
I found a similar question where the answer was an issue with css encapsulation. Here is the link to that answer, it explains it better than I can. Their issue was with angular so it could be the same.
There is a section in create-react-app about adding a css reset.
From what I understand, CRA includes PostCSS Normalize as a dependency, and all you need to do is create a css file and add #import-normalize; to it, and you will have normalize.css. (By the way, my editor gives me "Unknown CSS at-rule" with this #import-normalize).
What I want is a reset that includes having the margin on body be zero. I can't even tell if the reset is being applied just by looking at my app. I just want to make sure: this setting is not actually included in the normalize.css that is included by following the instructions?
Also, where can I find an explanation of what #import-normalize means? I haven't seen this syntax before.
Finally, is there a way through CRA to use a different reset file, or should I just install another one and import it as usually done?
Here is a bit of background on normalize.css
http://nicolasgallagher.com/about-normalize-css/
With CRA you can normalize/reset CSS with any method you like. You just need to create a stylesheet with the reset/normalized CSS rules in it and import it into App. i.e import './myCustomReset.css
or you can also add the reset CSS file to the public folder, and add it as a link tag to your index.html. i.e <link rel="stylesheet" href="./customResetStyles.css">
I tend to use https://gist.github.com/DavidWells/18e73022e723037a50d6 whenever I need to reset styles instead of just normalizing.
This is my short problem, in my page I have an old version of Materialize, and I have seen in the last version of it that they have added the class "xl" to define grid's sizes.
If I upgrade all files, my page will break, because for example, in my JS file I open the modals with the function "leanModal()" and in the new version they use "modal()" and if I upgrade it, is a lot of time!!.
My questions is the next:
If I only need the class "xl" can I upgrade only the CSS File? If I would make it, would have a problem in the future with the JS File?
My version of Materialize: v0.97.7 (2014-2015)
The actual version of Materialize: v0.98.1 (2017-Now)
I'm not all that familiar with Materialize but I believe it has components that are implemented with a mix of CSS, HTML and JS. If you are using any of these components then yes, there's a possibility that other things might break. Typically these components will be expecting a certain HTML structure and CSS classes to be available/used. If the name of something has changed in one area of the framework then it's reasonable that something else could have changed elsewhere. You'd have to verify that yourself.
Yes, You will have problems because the JavaScript calls specific classes in the CSS for that version.
I am working on the back end of a website and thought of installing the JavaScript SpellCheck (link here: http://www.javascriptspellcheck.com/). I followed the instructions and installed the plug in with ease and it works like a charm.
The problem is that this plug in overrides my css design for the input box and text area.
I had been trying to come to a solution but could not get anywhere close. Did anyone, who installed JavaScript SpellCheck, encounter this problem and how to solve this.
Update
I even tried putting the css file after the plugins and it does not work.
Put your css files after the plugins' css file, so that your file's css rules would have more precedence.
If you still getting overridden css rules, then use the most relative(nested - more the nesting more the precedence) selectors and !important if necessary.
I want to reset remove or make initial all the css properties defined in an external css file. I want the solution should also work when I edited/added/removed properties in css file.
So solutions in here don't work.
For example $('div').css('width','');, is not a solution cause it clears the width property in a HARDCODED way.
Also solutions like $('div').attr('style',''); does not work cause I do not use inline styling, also again $('div').removeClass(''); is not a valid solution.
Any answer would be appreciated, thanx.
You can playaround the code here: http://codepen.io/ertugrulmurat/pen/JEhfe
And; How to dynamically remove a stylesheet from the current page is not a solution, another side effect of this is that it removes all styles for all elements, this is not the case wanted
Just use this $('link[rel=stylesheet][href~="external_css_link.css"]').remove(); and remove the link of the css file which you don't want in similar manner you can again add the file
UPDATE
I tested the same in local file system where css is other file and run the same code and found that the style is removed completely and it behave in complete different manner as it working in the online javascript editor jsfiddle or any other because they internally include the css in the page they don't include the an external link thats why
$('link[rel=stylesheet]').remove();
not work here in your sample
in other way it remove the style completely