Tailwind CSS Tutorial #4 - Margin, Padding & Borders
ฝัง
- เผยแพร่เมื่อ 27 ส.ค. 2024
- 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...
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.
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...
still not working bro
@@lovishsingla3681 just use CDN for now, bro. Good for practice.
@@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'],
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.
Expectations ALWAYS fulfilled when on this channel
Whenever i visit this channel and hear your voice , it give make me feel pleasant and grateful 🙏🙏
Thank you so much 😀
Thank you for your all series
... I am your big fan.... Sir..... Keep making videos.....🙏🙏🙏
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 :)
Amazing content!!. Thank you
Thanks for the video. I wanna ask if you will be including purgecss to exclude unused css classes ?
You're just Awesome !! 😍😍
Thank you so much 😀
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?
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?
Thank you sir
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?
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Same with me, i need to keep command again n again
@@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.
@@boksi0527 He didn't explain that at all pos.
What if we want to add custom color?
padding and margin didn't work for me
How can we do global styling in tailwind?
Thanks!
please make video on NUXT jS
Thanks a lot Shaun for all the wonderful videos
You should make some videos with Vue and tailwind they make a great pair
Thank god, You saved me.
anyone watching in 2024
You didn't drop the link to the tailwind css but nice tuts thou
Thanks you !!! :)
Hello sir I love your teaching way.
Why not start hubspot tool for web development
Great content
Pro level!
What is the font you are using for the recipes site?
Nunito
for each change i make i need to rebuild the CSS why?
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?
Yes using '@apply'
Yup use postcss cli npm run watch .heading{ @apply size-2xl font-bold text-blue-500 } if you need help I can help you
Hey, I cover this later on using the @apply directive.
@@NetNinja got it. Thanks :)
Alright then gang.
Master ur voice has changed alot..😬😬❤
Can't open live server anyone pls help?
Thank you
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.
for a project I agree it would be a good idea. This playlist is more like a walk through and its better this way
Laravel more tutorial request ninja please
{2024-04-18}
1st
thank you so much sir