I have the latest WebStorm 2020.3. It supports Tailwind CSS, I installed the PostCSS plugin and used NPM to install Tailwind CSS and all sorts of plugins.
What I have no clue about is how to setup WebStorm to actually use PostCSS with a file watcher to actually run and do anything useful. I asked JetBrains and they had no actual useful information.
All I need is some simple example of how to get WebStorm to use Tailwind.
Initial project setup doesn't depend on an IDE. For the quick start, documentation on the Tailwind CSS site should be helpful.
Tailwind CSS plugin in WebStorm 2020.3 adds convenient features like Tailwind CSS classes completion and CSS preview. It doesn't require any configuration, it will just work as soon as you have node_modules/tailwindcss/tailwind.css and node_modules/.bin/tailwind local files.
If you use tailwndcss version 2.x then make sure you also have dependencies on postcss and autoprefixer in your package.json, as written in https://tailwindcss.com/docs/upgrading-to-v2#install-tailwind-css-v2-0-and-post-css-8
Basic setup doesn't require to configure any File Watcher.
I was searching for a setting I had forgot and stumbled on this post.
If you want PHPStorm to understand PostCSS in your CSS file's all you need to do is go to Preferences -> Languages & Frameworks -> Stylesheets -> Dialects. There you will set your Project CSS Dialect to PostCSS .
Related
This might be a silly question stemming from unfamiliarity. I'm rewriting a project that was previously using Ember 1.7 in Ember 2.3, using Ember-cli v2.2
Now, in the old project, there were a couple of libraries being included manually on the index.html file, put in the scripts directory and then compiled. For example, let's say the JS asset I want to include is offline.js.
I understand that Ember-cli uses Bower and can be used to install bower components, like Bootstrap or moment.js and such. What about custom JS? I've put the file in offline.js, included it in index.html but that doesn't do anything.
I don't think I understand how to add/import vendor assets at all; how do add, say offline.js to the project and have it available throughout the application?
You should add the offline.js file to the vendor folder at the root of the project, and then in your ember-cli-build.js file add the following line:
app.import('vendor/offline.js');
This adds the offline.js file to the vendor.js which is built by default. You can see more documentation at the Ember CLI website.
I am trying to learn to use Google Polymer and wanted to use Django as I have some data crunching planned for the app and wanted to use python for it. The google Polymer website (Getting the code) highly suggested installing Polymer through bower. I went to the bower website and they said to install bower using nmp. I installed nmp (nodejs.org, I ran out of link privileges), installed bower and proceeded to install Polymer into my django virtual environment. I found a functioning website with it's files on Github (github.com/mc706/three_most_important_things) and compared their settings.py files to mine, and their directory hierarchy to see how they had implemented Polymer. It appears that they didn't use bower to install polymer, and they have polymer as an app inside their django project. I am not a django expert but I have used Bootstrap with it and had no problem. I assumed Polymer was just a set of css and js files that made code implementation easier. I have tried shifting the Polymer "components" around (first in bower-components, then static/components) and changed my link references to point there, but I still get a blank page when I render it. Can someone give me a simple file hierarchy example of where the polymer files should be stored and how to reference them? eg.
project
bin
include
lib
project
project main
project apps
static
static
components
There are only a view sites that mention django+polymer together, and normally it's a question about {{}} and {% verbatim %} usage. I can't seem to get to that point. Any setup advice would greatly appreciated.
I want to have some custom steps run during them ember cli build, is there a supported way to do that? Specifically, I want to parse comments in css files and build write files to the public directory based on those comments.
You should create an ember-cli addon to create extra build steps. There is some good documentation around on Google, but here is a blog post I used to create addons. This guide is more tailored toward creating ember components but there are other ember-cli hooks you could use to run code during the build process.
Perhaps you could use the included hook to run some code to read your css files and then import your files into the public directory. Other hooks that you could use are documented here
Alternatively, if there is a broccoli plugin that does what you want, you simply need to add it to your package.json and run npm install. Now the plugin has been added to the build system.
I have a django project under a virtualenv.
I included the django-zurb-foundation 5.3.0 package to use foundation but this version only include static css files.
It's my first time using django and normally i use foundation with sass using bower and grunt.
How can i do to use the sass version of foundation?
What should be the files tree?
UPDATE
i installed django compressor and i got it work on local, it works perfectly, but i cannot get it to work on my production server:
on local env i have a CACHE folder with the css static files in it and the html page call correctly the file from there.
On the prod site instead, it doesnt create the CACHE folder and it doesnt render the path to it and it keeps the path to the scss file.
What am i doing wrong?
It seems like compressor isnt working on the prod server, i'm afraid i'm doing something wrong with django settings.py since i'm new to it.
any help?
I have heard of a few people using django-bower with foundation, personally I have not played with it but its worth looking into if you have not already.
I really can't find a reason to use a third party Django application to do that, using front-end frameworks like foundation or Bootstrap is as simple as compiling the less or sass source files to a css file and include it in your html (<link rel="stylesheet"...).
With Django you can use Bower and Grunt without any problem because they're independent and totally configurable to fill your needs. What I do with bower is to create a .bowerrc file at the same level of the bower.json file with the directory setting pointing to the main static folder, something like:
{
"directory": "my_django_app/static/bower_components"
}
Talking about the django-compressor app all that I can say is I don't recommend to use it in a production environment, it has some performance problems and personally I prefer the static files to be responsibility of the front-end dev instead of the back-end dev. For example you will need to have source maps for your javascript for debugging purposes and I don't remember if it's possible with this plugin.
Instead of using the django-compressor you can use a grunt plugin to to it, I've done one that may help you to do so: https://www.npmjs.org/package/grunt-django-compressor
I like using the python editor pydev in Eclipse. I want to team up with some people who've a python project (actually a Django site) stored in a mercurial repo. Can one create a new Django project in pydev that grabs code from a Mercurial repo? If so, how?
Thanks
Arthur
Doing a google search on does eclipse support mercurial gives you:
MercurialEclipse - an Eclipse plugin for Mercurial support, and I would suggest to start from here. This should work regardless of what sort of project you're working on.
A discussion on whether it is better to use git or Mercurial with Eclipse, which can help you out.
Additionally, if you didn't want to install the MercurialEclipse plugin, you could use Mercurial independently of Eclipse, clone the repository and then start a project with those files. In this case I would just make sure that your project meta files are in Mercurial's ignore list so they wouldn't get pushed to the remote repository.
If there's anything you'd like me to elaborate on, please comment. Good luck.