Tailwind CSS Tutorial #4 - Margin, Padding & Borders

Подписаться 1,5 млн

Просмотров 153 тыс.

50% 1

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.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/vu...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iamshaunjp/tailwin...
+ Full html template - github.com/iamshaunjp/tailwin...
🐱‍💻 🐱‍💻 Other Related Free Courses:
+ • HTML & CSS Crash Cours...
Download node.js - nodejs.org/en/
Get VS Code - code.visualstudio.com/

Опубликовано:

6 июл 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 54

@YahiaHegazy 2 года назад

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.

@Arya20012 6 дней назад

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

@NetNinja 5 дней назад

Thank you so much 😀

@manthanpatel779 3 года назад

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

@hakangenc1 3 года назад

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

@umarbekorifov1777 3 года назад

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 :)

@waifufx 2 года назад

Expectations ALWAYS fulfilled when on this channel

@michaelkamau9565 3 года назад

Amazing content!!. Thank you

@Shakeel714 3 года назад

Thanks a lot Shaun for all the wonderful videos

@BloodBunn 5 месяцев назад

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 4 месяца назад

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 4 месяца назад

still not working bro

@BloodBunn 4 месяца назад

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

@RobMatthews21 10 месяцев назад

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 9 месяцев назад

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.

@AMBRISHPATIL 3 года назад

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

@hyperpakol 11 месяцев назад

Great content

@rajbannasa7662 Год назад

thank you so much sir

@younesmahmoud8543 Год назад

Great series Thanks 🤩🤩🤩🤩🙏🙏🙏🙏

@NetNinja Год назад

Thanks Younes, glad you enjoyed it!

@SephoraALAYE 4 месяца назад

Thanks you !!! :)

@ansarqazi4377 2 года назад

Pro level!

@suzannehunter6923 Год назад

Thanks!

7 месяцев назад

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

@bruceclark2277 2 года назад

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.

@kashmirtechtv2948 12 дней назад

What if we want to add custom color?

@newpheeraphat5495 2 года назад

Thank god, You saved me.

@sththapa416 3 года назад

please make video on NUXT jS

@kibromhs7566 Год назад

padding and margin didn't work for me

@kashmirtechtv2948 12 дней назад

How can we do global styling in tailwind?

@elgs1980 3 года назад

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

@waifufx 2 года назад

Nunito

@MohamedHamdy-qo2fs Год назад

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

@Alex-xw5bc 3 года назад

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

@madd5 3 года назад

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 3 года назад

Yes using '@apply'

@tanzimibthesam5861 3 года назад

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 3 года назад

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

@madd5 3 года назад

@@NetNinja got it. Thanks :)

@mahamdabdi Год назад

yes

@aifsssm 2 года назад

Alright then gang.

@inovexa4039 3 года назад

Master ur voice has changed alot..😬😬❤

@venkat1370 Год назад

Can't open live server anyone pls help?

@medcherif8946 3 года назад

Thank you

@KenAdams-sn8yd 3 месяца назад

anyone watching in 2024

@official.mhm13 3 года назад

1st

@ravi_sorathiya 3 года назад

Laravel more tutorial request ninja please

@Pareshbpatel Месяц назад

{2024-04-18}

@EllisEnobun 3 года назад

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.