Creating a Modern Webpack 5, TypeScript, and TailwindCSS Web Project

So I was looking for a good starter project for Typescript, Tailwind CSS, and Webpack with DevServer, Hot Reload, Build process e.t.c. Couldn't find something that works and is up to date. So created my own.

Code:

🎥🎤📷 GEAR for Content Creation (contains affiliate links) 🎥🎤📷:

❤️❤️ Become a Supporter at Patreon (every bit of support matters):

❤️ Support the CodeWithAhsan community One-Time-Only:

🎥 Live Streams / Free sessions:

👉 Socials:

[CodeWithAhsan]

Typescript vs JavaScript?? What do you prefer?

[TheNelsonc]

Mate!! my respect!!! you saved my day, nothing works until now, thanks for sharing!!

[ragilburhanudinpamungkas]

Thank you man, you save my life. I've already follow 3 tutorial to configure tailwindcss, webpack and webpack, and nothing is work. when i follow your step, it's only 20 mins, but I got so many knowledge. you are a lifesaver. thank you very much. i hope you have a great day

[tdkentertainment-vw]

i checked all my notifications like 10 times until realizing its your notification sounds haha, great video helped a lot thank you!

[mrs]

this is awesome, i am glad that i found this chanel

[webok]

Thank you, I have a similiar build that was out of date and starting to fall behind version wise for some of the pieces. This was really good for getting back up to date. Also, I removed a lot of bulk from my build. Cheers!

[alexandersamokhin]

This was amazing :) All the other tutorials are outdated and show how to configure basic Tailwind CLI with frameworks. But this is exactly what I was looking for. 10 out of 10!

[muhammadhassan]

Well Explained. Keep it up brother.
You really cleared up many confusions in my mind about webpack and how does it work.
Worth watching tutorial.

[stephenjames]

Thanks for the content, it's up to date which is often hard to find.
Note: If you are following along at home, take care and observe that he installs webpack-devserver and then the video jumps back and installs webpack-dev-server.
It threw me off for a bit, thought I had some deja vu when he started talking about installing again (around 8min in the video).

[benbernardy]

It seems like this no longer works with tailwind 3+. I'm reading that JIT is no longer needed and purge options in tailwind config have changed. I have got it mostly up and running, but tailwind won't recompile without deleting the dist folder and then running npm run build ---> npm start. Any ideas for fixes on these new changes? Great video, by the way. Setting up a proper dev environment is tough. Thanks!

[isakeriksson]

Loved this. Thanks a lot. Since you posted this I guess they changed "purge" to "content" in the tailwind config and sort of reversed the concept. However, I can see you added this change to the Github repo so thanks a lot for keeping that up to date :)

[nickwoodward]

doesn't html-webpack-plugin copy the index to the dist folder too? just wondering why copy-webpack-plugin is needed in its place?

[nickwoodward]

Any thoughts on how to include this js/Babel rule?

rules: [
{
test: /\.js$/i,
include: path.resolve(__dirname, 'src'),
use: {
loader: 'babel-loader',
options: {
},
},
},

just a bit confused as I've not really got involved with typescript and webpack yet.

[alexandersamokhin]

By the way, how to extract all the CSS that Tailwind is generating for the build process. Currently, when running build, it keeps all the CSS inside bundle.js. Should I use CSS Extract plugin for this task?

[mrs]

what can e do when we have multiple pages and multiple script ?

[reilwaystation]

even chat GPT can't answer this. coming here 2years after