I’ve heard a lot of chat about fancy front end frameworks like Tailwind CSS and I’m trying to experiment to build sites that don’t look like Bootstrap, but I have a feeling I’m about to overcomplicate my life.
I wasn’t sure if one of you out there might have a more elegant solution to get node and npm up and running to help me build my Django site. I’ve been using Docker since @wsvincent released Django for Professionals and really don’t want to look back.
Right now I’m at the point where I’ll just have to use the entire giant Tailwind library via CDN, but figured I’d ask if any of you had tips!
Tailwind CSS’s CDN is excellent for prototyping. I start with it, and then I switch to a locally compiled version when I am ready to ship the project. Tailwind CSS’s built-in Purge CSS support will trim a >1M file down to about 20K or less for me, which can shave a second off of your page rendering time. So I highly recommend it.
If you are comfortable with Docker Compose, I will create a service (I call mine frontend) that is based on the Docker Node image https://hub.docker.com/_/node/ that has a shared volume with your web service so that you can share files between each service.
I would use the node service to run npx tailwindcss on the fly. This is also nice for installing other JS files, which you may eventually need anyway.
My understanding is that you want to add Tailwind CSS to your monolithic, so the best option I see is install in your Django project django-webpack-loader that is a good manager for assets, you can use with with npm or yarn (I prefer yarn).
Also we have the option of download the scss files of Tailwind CSS and put them inside our static folder.
Remember that Django shouldn’t serve static files in production at least you are using a static manager like whitenoise.
I’ve been using Tailwindcss for a while now, and just started a new commercial project with it. I’ve been converting a Cookiecutter Django templated project to use it and it’s been a fun process. You can watch me working on it and a few async Django views on my twitch stream at https://twitch.tv/danielfeldroy starting in about 30 minutes (videos to uploaded to YouTube later today)
I’ve started playing with TailwindCSS a couple of weeks ago. What really helped was quickly watching the videos by Adam Wathan. The pieces where he discusses the setup are very handy.
What I am currently doing, following basically to the letter what Adam suggests, is adding an extra build step, in which I run purgecss to build a small version of the css directly into the static django directory, and my base template imports this css. You can run collectstatic, etc. as with any css file.
There is one caveat, though, if you like auto-complete in your IDE, you shuld use the full css while coding, and just leave out the purgecss for deployment. I am, very slowly, building it in public on my repository for my personal blog, hope to be able to document the process soon enough.
I used it, I was even fascinated by it and created django-tailwind package. But then, after I had created several commercial projects with Tailwind, I concluded that it causes more hassle than brings benefits.
My main gripes are:
You can’t reliably build a big project without abstracting a bunch of CSS classes into reusable components. But if you do so, why do you need Tailwind in the first place?
I know CSS properties by heart, but I had to look for their equivalents in Tailwind. What’s the point?
The resulting file is huge, of course, you can use CSS nano or equivalents to trim it down, but why should you do that? What do you get in exchange?
The CSS compilation time is slow compared to SASS compilation times.
IMO if you:
want a quick tool for prototyping and want to get immediate results while tweaking CSS - then browser-sync is your friend. Use it with SASS, LESS, or plain CSS, and be happy.
don’t want your sites to look like bootstrap - feel free to start from scratch. Today we have Grid, Flexbox and CSS Variables it’s never been easier to roll out your own CSS framework.
want a way to organize your CSS properties like colors, spacing, font-sizes, etc., and to be able to use them consistently throughout a project, then CSS Variables (again) is your friend. Additionally, you could look at SASS Variables..
I’m not pooping at Tailwind here, no I’m just sharing my perspective and experience. These are a few thoughts from a person who was so adored by Tailwind that even created a Django package for it.
Thanks for the advice, @jeff. I had a feeling that a new Node service would be what I’d need, but volumes will require more research.
Thanks for the tip, @galileoguzman. I’m totally unfamiliar with webpack at this point, but it keeps popping up in my reading.
Awesome, @pydanny, I’ll have to peek in on that more regularly. I actually saw one posted somewhere the other day, but didn’t have time to stay for long. Would you want to post a link here to your YouTube channel hosting the videos?
Funny, this is exactly the solution I came to on my own. It wasn’t obvious to me right off the bat that I don’t really need Node in production.
Noob question, but to clarify: do you mean the IDE won’t find the Tailwind classes if they aren’t listed in a file?
@timonweb - I appreciate the critical review. Until now, I don’t think I’ve heard anyone really speak to the drawbacks. And thanks for the learning links. I’ll admit I’m unfamiliar with Grid and CSS Variables at this point.
I am a big fan of PyCharm, and (I have to admit I didn’t try this hard enough) didn’t find a plugin to work with Tailwind. Therefore, I needed the full css in order for PyCharm to pick up the available classes. I believe the guys at Tailwind have released a plugin for VSCode.
Indeed. It took me a while to find a setup I am comfortable with. I think there are no magical recipes, you have to find out the best for you (or your team).
I wrote up an opinionated take on how to set up Tailwind in Django. I also included extra stuff for Heroku configuration since that’s where I run my app. It might help others who are thinking of adding Tailwind.
Could you please share your asset pipeline for Tailwind ?