Integrate Tailwind into your Django application

🧑‍🏫 COURSES - Explore my latest Cloud computing & Django courses: www.cloudwithd...
Integrate Tailwind into your Django application
⚡️ Important link(s):
django-tailwin...
pypi.org/proje...
nodejs.org/en
pypi.org/proje...
🐦 Twitter:
/ cloudwdjango
⭐️ Github:
github.com/clo...
📢 Coaching:
www.cloudwithd...
📑 Blog:
www.cloudwithd...
❤️ Support:
www.paypal.com...
💫 Become a Cloud With Django member (30% course discounts):
/ @cloudwithdjango

[@5upern4tural]

I did 4-5 different tutorials/ways on how to implement Tailwind into Django. Yours is the first one that actually works! Thank you so much!

[@CloudWithDjango]

I'm very glad to hear that you found the video to be of value! Of course, no problem! Happy learning! :)

[@animeindanger9518]

Do we have to do these step everyone to use Django in projects

[@meyererik]

This was the perfect installation guide. Everything was clear, concise, and easy to follow.

[@CloudWithDjango]

Thank you very much! I'm very glad that you enjoyed the video tutorial!

[@DougMcLain]

The best tailwind implementation guide for Django.

[@CloudWithDjango]

Thank you!

[@coordinaciondeinformaticai7713]

Very clean job! Thanks for sharing this amazing guide, I'II try it.

[@CloudWithDjango]

Thank you so much!! I'm glad that you found it useful! All the best to you!

[@jacekmiecznikowski]

Thanks!

[@CloudWithDjango]

Thank you so much for the Super Thanks! I appreciate it!

[@joshwilson8704]

Thank you for the helpful guide and saving me further headaches! I wish I would have started with your video before trying many other methods.

[@CloudWithDjango]

Of course, my pleasure! I'm really glad that the video helped you! Sorry about the other methods being a hassle, but I'm glad that everything is now good for you! All the best!

[@marvelousncube]

Thanks a lot brother , your videos are a blessing to me.

[@CloudWithDjango]

My pleasure! I'm glad that you are finding the content to be of value to you! All the best to you!

[@kaashifameen5336]

Perfect explanation been stuck on this for hours, Thanks

[@CloudWithDjango]

Thank you! Of course, my pleasure! Glad that it helped!

[@SyedAdeelAli]

This tutorial is exceptionally clear and informative. I highly recommend it to others.

[@CloudWithDjango]

Thank you so much, Syed! :)

[@felixkuria1250]

Thank you so much for this guide for integration. I was asking how to go about this during production

[@CloudWithDjango]

My pleasure! So, there are a few ways to go about this, but to put it simply. You can deploy a production-ready web app with Tailwind CSS and Django, by first integrating Tailwind into your Django project using a tool like django-webpack-loader or django-compressor. Then, optimize and compile your Tailwind styles during the build process, and ensure proper static files configuration to seamlessly serve the CSS when deploying your Django application.

[@maximdongur-ool2226]

I back to this tutorial again and again, because other guys on KZbin offers solutions that do not work!

[@CloudWithDjango]

I'm glad that you found this tutorial of use!

[@Alex-fk2ie]

Thanks man! The final step when we run concurrently is the key one, we didn't have it explain accurately in the doc.

[@CloudWithDjango]

My pleasure! Ah, I see! Indeed sometimes a little bit more explaining needs to be added.

[@babatundekalejaiye7046]

Works seamlessly. Many thanks. ❤

[@CloudWithDjango]

I'm glad to hear that! Of course, my pleasure!

[@lucaslebrun5028]

Very clear and concise, thank you !

[@CloudWithDjango]

Thank you very much!

[@muskangyanani29]

Perfect installation guide!! thanks👍👍

[@CloudWithDjango]

My pleasure! I'm glad that you found it useful!

[@seithatim7821]

Thank you so much, you are a star 💫God bless you ❤

[@CloudWithDjango]

My pleasure! Thank you so much!!

[@cesardiaz-dk1dh]

this was perfect, great video

[@CloudWithDjango]

Thank you!

[@JacobSean-iy3tl]

awesome tutorial , You just got yourself a new subscriber

[@CloudWithDjango]

Thank you so much!

[@LuisViteri-y1y]

El Mejor tutorial e implementacion de tailwind con Django Gracias Genio

[@CloudWithDjango]

Thank you so much!

[@danrivera9599]

Hello everyone, if u have 4 routes on your npm, like me: (11:00) C:\Program Files odejs pm C:\Program Files odejs pm.cmd C:\Users\pc\AppData\Roaming pm pm C:\Users\pc\AppData\Roaming pm pm.cmd choose the third one, "C:\Users\pc\AppData\Roaming pm pm" this will solve your issue, have a nice day.

[@CloudWithDjango]

Thank you for your input!

[@krzysiekkrzysiek9059]

No one closes sidebar with folders and files to make screen bigger to watch but You, nice 👌

[@CloudWithDjango]

Of course, it's important that you all can see clearly!

[@skyzane2735]

What extensions in vscode are you using for Django development? I don’t have the correct syntax highlighting when writing code blocks in my html files. 12:16

[@danrivera9599]

is not a extension u can do it into settings.json, but if u want o need it one u can just search django and the first one by baptiste will be nice 2

[@sto700]

in development it works but would it also work in production? like in development, you have to run 2 servers

[@CloudWithDjango]

Hi. For production you may need need to tweak things and refer to the docs on the rest.

[@RAKIB-BD-CSE]

thank you teacher.. 🥰

[@CloudWithDjango]

My pleasure!

[@alphardx4284]

Thank you so much ...u r a lifesaver.

[@CloudWithDjango]

My pleasure! Glad that it was useful!

[@alphardx4284]

Yeppp💯

[@urekmazino1327]

any example of deploying it to production using gonicorn and nginx

[@CloudWithDjango]

Hi, Sorry we don't cover this in the video

[@urekmazino1327]

@CloudWithDjango hope u can cover production part next time , bcs most tutorials only for development part when u trying deploying to production u found few tutorials

[@CloudWithDjango]

I see. Well, thank you for the suggestion, I appreciate it!

[@matiasbg2704]

consulta como lo hago para el 127.0.0.1/admin ???, ya que acá se pierden todos los estilos!

[@CloudWithDjango]

Hi, I'd suggest taking a deeper look at the docs for this

[@SakinaJanjua]

amazing, it's highly appreciated sir!

[@CloudWithDjango]

Thank you! I'm glad that it was useful for you!

[@diegomiguel929]

Can django-tailwind be configured with Prettier to sort the classes?

[@CloudWithDjango]

Hi, You'd need to test this out to clarify for sure.

[@diegomiguel929]

@@CloudWithDjango Found an alternative extension in VSCode called "Headwind". It sorts the classes of Tailwind from every html file in the proyect, no matter the file is a django templete

[@harenderyadav8657]

css was not being applied automatically and some more problems were irritating me from around one week. BIG THANKS TO YOU SIR, YOU SOLVED ALL MY PROBLEMS.

[@CloudWithDjango]

Hi, I'm very glad to hear that this video solved your issues! Thank you so much for your kind comment. All the best to you! :)

[@31Chris24]

Thank your for this perfect and clear tutorial, appreciate it! Any tips how i can integrate DaisyUI in this setup?

[@CloudWithDjango]

Thank you so much! I believe there are many ways to integrate DaisyUI in this setup. What you could try first is the following: Install Tailwind CSS and Django-DaisyUI, Configure settings.py to include 'daisyui' in INSTALLED_APPS, Use DaisyUI components in your HTML templates, Run Django server to see the changes with DaisyUI styles applied. Good luck!

[@briangreenberg153]

Do you have any videos showing a complete project that employs tailwind rather than bootstrap, for example?

[@CloudWithDjango]

Hi, Nothing as of yet, but perhaps if time allows for it in the future, I can maybe look into this. Thank you for the suggestion!

[@tayyabullah7460]

I'm a kind of not getting the concept of API's integration in django and I'm hopeful your teaching style can me understand this concept which I'm struggling to understand please do make tutorials for freshers how this API's thing works

[@CloudWithDjango]

Thank you for your suggestion!

[@lucasweaver2]

Another one of Heaven's angel's helping us on earth ❤

[@CloudWithDjango]

Thank you so much! You are took kind! ❤

[@danrivera9599]

hello people i have a question, how i do the deploy of the tailwind

[@skyzane2735]

In a scenario when cloning an existing django project repository, what are the steps need to take to easily install all the necessary dependencies listed in django installed_apps? Like example even if it is listed in the django installed_apps, and somebody forgot to put requirements.txt, then we don’t know what packages are needed to install

[@r00t_164]

run "pip freeze > requirements.txt" to generate requirements file in your app, then push it to your repo. Whoever clones the repo will have to run "pip install -r requirements.txt" to install the dependencies on their system

[@anuraagg5587]

Hey, I am getting an error in the command ( python manage.py tailwind init ) its saying tailwind not found

[@CloudWithDjango]

Hi. I'd recommend double checking where you installed tailwind, please ensure that you are working in the correct environment

[@santiagofigueredo5432]

Cómo lo puedo utilizar sin la necesidad de poner "python manage.py tailwind start " en la consola para que se me puedan colocar los colores y estilos?

[@24webdevelopment]

It works on my computer. But what about the online version? On Pythonanywhere for example, What are the next steps for that?

[@CloudWithDjango]

Hi, I'd suggest reading further in the docs for more information as a step in the next direction

[@24webdevelopment]

no video about it from you in the near future?@@CloudWithDjango

[@uribelu]

excellent... can you do a tutorial for sending emaiil link for user registration ?

[@CloudWithDjango]

Thank you!! I appreciate the suggestion, if I have time, I can maybe take a look at that.

[@howlround]

HI. I've gone through all the steps a couple times. However when I change any of the values the css stops working. If I have bg-gray-500 and I change it to bg-gray-200 It doesn't show any color at all. Any idea what might cause that? I've installed django-tailwind exactly as shown in a brand new project, but I can't change any of the css with out it breaking. Thanks. It's a great tutorial. I just hit a quirk

[@howlround]

I'm gonna leave this up despite the embarrassment in case others hit the same snag...I ran python manage.py tailwind start in cmd but outside my virtual env. That was the cause.

[@CloudWithDjango]

Hi there, Thank you for your feedback, I appreciate it. Oh no worries, I'm glad that you managed to solve the issue that you faced. All the best to you!

[@wanndev-code]

Will there be no problems when deploying/hosting?

[@CloudWithDjango]

Hi, You'd need to refer to the docs for clarity on this.

[@dragonoha]

Hello, very nice video as all others :) Would You mind elaborating, why You are choosing a 3rd-party django package over official TailwindCSS from their docs? I fear that as many such packages, this one may be dropped in the future. Cheers!

[@CloudWithDjango]

Hi, Thank you for your kind feedback. It's because it's a simple and straight forward way to get started.

[@toheedulhaq146]

Quite helpful

[@CloudWithDjango]

Thank you!

[@christopheanfry]

fantastic video thanks!!!!!!!

[@CloudWithDjango]

Thank you very much! Of course, my pleasure!

[@alvaroavila7304]

How about deploying with this? how we do that?

[@CloudWithDjango]

Hi, I'd suggest taking a look at the docs for further information in regards to deployment

[@inteliconn995]

Thanks again!

[@CloudWithDjango]

My pleasure!

[@extorrote]

Long process, do I have to do all this for every project? 👀

[@CloudWithDjango]

Hi, There are many ways to do this. This is just one way.

[@kamamedia3535]

How do you implement it in css file instead of inline.

[@CloudWithDjango]

Hi, I'd suggest doing some external research on that and perhaps browsing through the docs

[@ashutoshkumarsingh1700]

It is really helpful tutorial

[@CloudWithDjango]

Thank you!

[@NoorKhan-lr2tt]

Thank You

[@CloudWithDjango]

My pleasure!

[@ahmad-fazil]

thanks it's working

[@CloudWithDjango]

My pleasure! Glad to hear that you got it working!

[@Biisal-ai]

Thanks sir

[@CloudWithDjango]

My pleasure!

[@ziya.5788]

Clear! Thank you.

[@CloudWithDjango]

My pleasure!

[@ahmadumar9387]

peak of teaching! hope you will publish a new course in udemy

[@CloudWithDjango]

Thank you so much, Ahmad!! Don't worry, it's coming soon!

[@athreefu9151]

thank you

[@CloudWithDjango]

My pleasure!

[@try_gettechnical]

thanks

[@CloudWithDjango]

My pleasure!

[@Good-and-Geeky]

😂 I might go ahead and try that

[@CloudWithDjango]

Hahaha, Tailwind is indeed quite the process with Django. Although, I've tried to simplify the process as much as possible in one way. Good luck!

[@Good-and-Geeky]

I tried it and it all works a treat. I'm liking Tailwind so much more than Bootstrap...@@CloudWithDjango

[@CloudWithDjango]

I'm glad that it works well for you! Tailwind definitely has it's perks over Bootstrap!

[@erprakashnayak]

Can you make tailwind and django thanks

[@CloudWithDjango]

Thank you for your suggestion!

[@VeigarAnao.]

anyone with font issues? i cant use custom fonts :(

[@frameff9073]

Thank

[@CloudWithDjango]

My pleasure!

[@Quephara]

godsend

[@CloudWithDjango]

Thank you so much!

[@wolfred10]

The @apply directive is not working in my django project static css files. Example: .test { @apply bg-blue-500 underline; } Does anyone knows how to fix this

[@CloudWithDjango]

Hi, Please ensure that you have processed the above logic by PostCSS in order to generate the final CSS with the utility classes.

[@wolfred10]

@@CloudWithDjango The only way to use directives is to use them in the following file 'theme/static_src/src/styles.css', thats the only whay i can meke it to work

[@CloudWithDjango]

Hi, Yes, that is manner in which you can set them up.