I recently decided to learn more about web development and a friend introduced me to the tailwind. I had some initial problems with setting it up but I finally managed to do it yesterday. I tried a few classes to see if it works and it was fine. Then I closed vs code and everything else and wanted to work on it more today but nothing changed when I add classes except the ones I already added. For example, I used bg-cyan-500 just for the fun of it. I can still use it to manipulate the document but if I go with bg-cyan-400 doesn't work. How can I fix this issue?
Thank you very much, guys. I resolved the issue. Apparently, I didn't understand how tailwind exactly works. The problem is that I didn't run the --watch command when I started working on my project again, thus, tailwind didn't pick up the changes and added the new styles to my style sheet.
So I just used "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch" command to the terminal and it worked again. I can't believe I missed something so fundamental.
Related
I am using include-media in a project and getting the syntax error
[scss] ) expected
when viewing this mixin in my vscode editor. I have had a look at this question, but it is not about the same syntax I am experiencing.
Here is a screenshot of the section with a problem in this file
I have not made not made any changes to this mixin, I simply downloaded and included it in the project it as outlined here
Questions:
What is causing this error?
How come I am still able to use this mixin even though it has an error?
How can I solve this?
1. What is causing this error?
This issue is occuring because vscode editor does not support css preprocessors completely.
2. How come I am still able to use this mixin even though it has an error?
You will get your output as the include-media scss is completely fine.
3. How can I solve this?
You need to add vscode service for css which will help to detect css pre-processors syntax and your error will be resolved. Include this vscode script in your vscode editor. As mention here.
https://github.com/Microsoft/vscode-css-languageservice
Thanks
I have a very long CSS file because i have merged a couple of separate style sheets. Now i can see the repating classes on DOM Inspector but detecting and deleting the one by one is very hard.
I found some CSS minifiers on internet like https://cssminifier.com/ which is minifying the code and cleaning the multiple classes but since i am newbie it is very hard to read or edit them for me.
I have think of regex but so far i achived nothing. I am open to any kind of solution which does not include back-end coding.
I have found another solution and i've just wanted to share it, worked very well for me.
I've installed Node.js and installed CSS Pure:
npm install css-purge -g
Right after i have put my CSS file to somewhere that i can access easily, like C:\MyCSSFiles and run the following code inside that directory:
css-purge -i myFile.css -o myFile_purged.css
i stands for the name of the input file, and o stands for the name of the output file.
This process had removed the comments on the code tho... It is ok for me anyways.
I've been stuck with this error since yesterday. Whenever I use --watch or when manually compiling my scss. I'm currently using it for the custom theme development of a WordPress site. Tried uninstalling/reinstalling SASS but it's not helping. Here's what it returned to me when I used --trace as recommended:
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/exec/base.rb:28: stack level too deep (SystemStackError)
My suspicion is that I nest the elements too much. Is there a limit when nesting on SASS? Do you have any other fixes that I can try? I'll really appreciate it. I don't really wanna go back to manually writing my CSS for this project.
Enviroment
I have an extjs 6 application which is already compiled and the css files like they should be. This application wasn't compiled for a while and now it's generating a different (wrong) css file. Since someone else changed the app, I have no clue what has changed since the last compilation. I compile with sencha app build development and the following CSS files change:
build\development\MyApp\classic\resources\MyApp-all_1.css
build\development\MyApp\classic\resources\MyApp-all_2.css
There are a few more files in the folder which do not change.
Versions:
Sencha Cmd 6.1.3.42
SDK Version (if neccessary) 6.0.2.407
Problem
I want to generate the same css like before. It seems there are just a few files which are not included within the compilation process, like:
ext/classic/theme-base/sass/etc/mixins/frame.scss
ext/classic/theme-base/sass/etc/mixins/slicer.scss
ext/classic/theme-neutral/sass/src/tab/Tab.scss
Question
What do I have to do, to get the old css? Is there some file with includes? Like classic\sass\src\view\main\Main.scss or something? I guess those includes are somewhere (since it already worked at least once) and maybe commented out or something.
What I've already tried
I tried to compile with different themes refered by the app.json attribute was builds->theme. I also tried a lot of playing around stuff, which I can't describe here in detail.
Any advice would be greatly appreciated!
Thanks in advance!
If you have any questions leave a comment and I'll try to add it to my text!
I am getting really confused about configuring Sass config options. Basically I want to disable the line comments in the compiled css file. So I went in and created a sass.rb in the Initializers folder with the following line:
Rails.application.config.sass.line_comments = true
I then restart my apache server and check in Safari web developer, my css file still contains the comments like /* line## /path/to/css/file */ above every css statement. I then test it in Firefox and open Firebug, and I don't see those line comments there, which suggest inconsistent browser behavior.
So I go back to my initializer sass.rb file and turn on line_comments, restart the web server and try again, this time I get the exact same result as before, nothing's changed, that basically tells me either that's specific to the browsers, there's a problem with the setting scope/syntax, or there's a caching issue (I'm working in development, so there shouldn't be any caching, right?). I'd really appreciate if someone can provide some insight on this. Thanks.
EDIT: The proposed solution to make a change to the sass file(s) didn't solve anything so I doubt it is the same problem.
Note: I am using sass with rails and I am getting separate css files for each of my sass files, which doesn't seem very right...
The problem was a combination of needing to set config.assets.debug to false for development, setting config.assets.compress to true, and probably a better understanding of sass compilation.