Tailwind CSS Tutorial #4 - Margin, Padding & Borders

Hey gang, in this tailwind css tutorial we'll take a look at utility classes for applying margin, padding & borders to elements.
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
----------------------------------------
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninj...
+ Vue JS & Firebase - www.thenetninja...
+ D3.js & Firebase - www.thenetninj...
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iam...
+ Full html template - github.com/iam...
🐱‍💻 🐱‍💻 Other Related Free Courses:
+ • HTML & CSS Crash Cours...
Download node.js - nodejs.org/en/
Get VS Code - code.visualstu...

[@BloodBunn]

for those whose changes don't work, add --watch to your build-css in package.json, like this:
"build-css": "tailwindcss build src/styles.css -o public/styles.css --watch"
then in the terminal:
npm run build-css
this way you only need to run it once.

[@arminmesic7273]

Thanks. This is why i hate tailwind. Because of this setup. Why should i always do this..... Couldn´t it be an extension, that work global within vscode which once installed. And can be called if you want to work with it...

[@lovishsingla3681]

still not working bro

[@BloodBunn]

@@lovishsingla3681 just use CDN for now, bro. Good for practice.

[@lynako-as8448]

@@lovishsingla3681 for me it worked when i did this in my package.json : "scripts": {
"build-css": "tailwindcss build -i src/styles.css -o public/styles.css",
"watch-css": "tailwindcss build -i src/styles.css -o public/styles.css --watch"
}
and also in my tailwind.config.js (not the default one) : content: [ './public/**/*.{html,js}', './src/**/*.{html,js}', './index.html'],

[@YahiaHegazy]

I know that when I come to this channel that I am going to learn. Thank you for posting these videos and even updating them.

[@waifufx]

Expectations ALWAYS fulfilled when on this channel

[@Arya20012]

Whenever i visit this channel and hear your voice , it give make me feel pleasant and grateful 🙏🙏

[@NetNinja]

Thank you so much 😀

[@manthanpatel779]

Thank you for your all series
... I am your big fan.... Sir..... Keep making videos.....🙏🙏🙏

[@umarbekorifov1777]

Hello Shaun. Thank you for all these series, they are Great! And I would like to ask, could you update your Python tutorial and add Django, please, very needed at the time 🙏. Once more, thank you for your effort in making every single tutorial :)

[@michaelkamau9565]

Amazing content!!. Thank you

[@hakangenc1]

Thanks for the video. I wanna ask if you will be including purgecss to exclude unused css classes ?

[@melodiousbeats8339]

You're just Awesome !! 😍😍

[@NetNinja]

Thank you so much 😀

[@RobMatthews21]

Hi Shaun, these are the best tutorials I have ever used, thank you. I am having an issue. When I use the lesson 4 files from GitHub and run the build the output CSS file doesn't include all the classes. I am guessing I don't have something installed correctly'? Any idea what it could be?

[@klauseba]

I also had issues where the color and size didn't update. Just copy everything from the github since Tailwind probably changed since 2 years ago when this video was posted.

quick question, why does my page not refresh until i run the build script again?

[@Mustafa41113]

Thank you sir

[@bruceclark2277]

These are great but I keep having to re-run "npm run build-css" for it to work on live server - anyone suggest why or where I can look to find out?

[@masaruo]

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

[@AllaboutMyLife485]

Same with me, i need to keep command again n again

[@boksi0527]

@@AllaboutMyLife485 I am quite late but you can add this in your script.
"watch": "tailwindcss build src/styles.css -o public/styles.css --watch"
(which shaun have already explained ) and then run the comand npm run watch.

[@user-lz2wf5dz2f]

@@boksi0527 He didn't explain that at all pos.

[@kashmirtechtv2948]

What if we want to add custom color?

[@kibromhs7566]

padding and margin didn't work for me

[@kashmirtechtv2948]

How can we do global styling in tailwind?

[@suzannehunter6923]

Thanks!

[@sththapa416]

please make video on NUXT jS

[@Shakeel714]

Thanks a lot Shaun for all the wonderful videos

[@Alex-xw5bc]

You should make some videos with Vue and tailwind they make a great pair

[@newpheeraphat5495]

Thank god, You saved me.

[@KenAdams-sn8yd]

anyone watching in 2024

[@emmanuelibiyemi5607]

You didn't drop the link to the tailwind css but nice tuts thou

[@SephoraALAYE]

Thanks you !!! :)

[@AMBRISHPATIL]

Hello sir I love your teaching way.
Why not start hubspot tool for web development

[@hyperpakol]

Great content

[@ansarqazi4377]

Pro level!

[@elgs1980]

What is the font you are using for the recipes site?

[@waifufx]

Nunito

[@MohamedHamdy-qo2fs]

for each change i make i need to rebuild the CSS why?

[@madd5]

unless Tailwind can be applied to repetitive sections at once it is useless. It's just a shortcut for pure css and would be useless.
Can you create your own css class which will contain several Tailwind classes?

[@andrewgad6746]

Yes using '@apply'

[@tanzimibthesam5861]

Yup use postcss cli npm run watch .heading{ @apply size-2xl font-bold text-blue-500 } if you need help I can help you

[@NetNinja]

Hey, I cover this later on using the @apply directive.

[@madd5]

@@NetNinja got it. Thanks :)

[@aifsssm]

Alright then gang.

[@inovexa4039]

Master ur voice has changed alot..😬😬❤

[@venkat1370]

Can't open live server anyone pls help?

[@medcherif8946]

Thank you

[@EllisEnobun]

A linear approach would be better. Start from the top and progressively go downward. The approach of adding style randomly; at the top, then scroll down to the bottom, back to top, then the middle is very uninspiring. It's better to start with the nav, the links, logo, etc, finish with that, then move to the main, finish with that, then move on. Styling bits and pieces of the nav, main, img, back to link, it is just too uninspiring for me.

[@vedanthbaliga7686]

for a project I agree it would be a good idea. This playlist is more like a walk through and its better this way

[@ravi_sorathiya]

Laravel more tutorial request ninja please

[@Pareshbpatel]

{2024-04-18}

[@official.mhm13]

1st

[@rajbannasa7662]

thank you so much sir