How to set up Django, Htmx and Tailwind (Using Npm)

[@omaral-halabiah2851]

when I run npm run build @7:31 no classes are copyed to main.min.css although I followed the steps exactly, I dont know why!!! can you help me?

[@omaral-halabiah2851]

maybe I have to add this line './core/templates/**/*.{html,js}', to "tailwind.config.js" file is it right ?

[@CodeWithStein]

Did you fix it?

[@neohornet1904]

Can I ask what vscode extensions you are using?

[@CodeWithStein]

Vue, Vetur, Python, Pylance, Jupyter, isort, flutter, EditorConfig, Django, Dart, C#, awesome flutter. So not very many :-)

[@wizziiid]

This was so helpful! thanks alot

[@CodeWithStein]

Thanks 😁

[@youbra4267]

thank you ❤

[@CodeWithStein]

You’re welcome :-)

[@donaldojinete]

This is a good stack for people like me that dislike some FE frameworks, could be nice include Daisy UI, Thank you !!

[@CodeWithStein]

I agree, it is a good stack :-D

[@miqbal_sis]

Thanks you for this. The admin interface is very out of css, how can we load default styling of admin without sending user to refresh.

[@CodeWithStein]

Hey, sorry, I don't understand what you mean?

[@miqbal_sis]

@@CodeWithStein Applying css to admin

[@kashaxx]

This is nice! Enjoyed it. Cheers :D

[@CodeWithStein]

Thanks Akash :-D

[@sanjaydhande6573]

As always, great ! Thanks

[@CodeWithStein]

Thanks 😁

[@AmoahDevLabs]

This is really cool. Thanks for the update

[@CodeWithStein]

You’re welcome 😁

[@24webdevelopment]

it works great on local system, but what about in production? How do I get it working online?

[@CodeWithStein]

Hey, this should work online as well. You just need to deploy it to a server like digital ocean, i have a few videos on the subject 👍🏻

[@joshajiniran]

Very nice tutorial and much appreciated, after dabbling with every kind of mechanism, this finally is smooth. Thanks. However, can the content array field in tailwind.config.js contain other *.html paths?

[@CodeWithStein]

Thanks 😁😁 sure, you can add as many paths and wildcards there as you like 👍🏻

[@sambots22]

I always enjoy your channel. Great work. Another great work yet to see is editing Todo title with HTMX

[@CodeWithStein]

Thank you so much :-D I will make more videos with Htmx, so maybe you'll learn that there ;-)

[@djtoon8412]

i like the way you explained it sounds so clear to anyone.But i need to know how can i add alpinejs to this project.

[@CodeWithStein]

Thanks 😁 the procedure is very similar, just search how to install it on Google 😁

[@djtoon8412]

@@CodeWithStein ok thannks.can do a tutorila on how to setup with build tools like webpack or vite

[@SmartC2007]

hey! npm install alpinejs add to the build property "cp node_modules/alpinejs/dist/cdn.min.js static/js/alpine/cdn.min.js" create alpine folder in static/js -> static/js/alpine (in order not to confuse the different js files) npm run build in your base.html (or whatever template you are using) put in the head seaction of the html: and you are all set. :)

[@storyofhistory95]

impressive, I keep waiting for your new video mr heheheh

[@CodeWithStein]

Great, it's coming tomorrow or friday ;-)

[@ermalgashimramori]

Great explanations. Thank you very much!

[@CodeWithStein]

Thanks :-D

[@quimmassague1961]

Thanks! How can you deploy this in Heroku?

[@CodeWithStein]

I have no idea 😝 never tried heroku 🤷🏼‍♂️

[@darwinsterritory]

what do you think about using in place npm, django-tailwind package?

[@CodeWithStein]

I'm not a huge fan. I know it can save time. But I like to be in control and do things from scratch :P

[@darwinsterritory]

@@CodeWithStein Понял, спасибо)

[@ukaszbielecki6545]

In my opinion, this is a really good approach (I might be wrong). Without linking to CDN or anything like that. I was looking for something like that. Thank you! But... Can I ask a question? Which approach is best for you? - django-tailwind installed from pip - your way with using npm or - using CDN

[@CodeWithStein]

I agree! My way with cdn is my favorite. Tailwind using CDN should not be used in production at least ☺️

[@24webdevelopment]

npm run dev gives me an error Missing script: "dev" To see a list of scripts, run: npm run What is the solution?

[@CodeWithStein]

Hey, try npm run start or npm run serve :-)

[@masteriq9787]

THANK YOU SO MUCH ! There is just one thing: I need to run always "npm run watch" after having made some changes.. I followed exactly the video..

[@CodeWithStein]

You're welcome :-D Hmm, that sounds weird. "npm run watch" is a command that should be running at all times during development :-)

[@masteriq9787]

@@CodeWithStein I dont know, but somehow it does not refresh by itself. Do you have any sources where you found the code?

[@CodeWithStein]

Okay :-s No, sorry I don't remember where I read about it. Are you sure that the paths to where the watcher is set up is correct? It has to watch the correct template files and folders.

[@UsedYourName]

lol i love ur accent wallahi

[@CodeWithStein]

Haha Thanks 😁

[@ibrahimoglu]

👍

[@CodeWithStein]

😁

[@saolainua4466]

for those who follow ecommerce project (not multiple vendor) of Stein, the config tailwind is content: ["./**/templates/**/**/*.html"],

[@CodeWithStein]

Nice, great tip 😁