PostCSS Crash Course
Vložit
- čas přidán 18. 04. 2024
- In this video, we will talk about what PostCSS is, set it up and show you how to use some of the popular plugins such as postcss-preset-env, precss, postcss-import, autoprefixer and more.
💻 Code:
github.com/bradtraversy/postc...
⭐ All Courses:
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Traversy Media On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
0:00 - Intro
0:47 - Slides
6:48 - Docs
8:14 - Setup & Install
9:42 - Build & Watch Scripts
12:40 - Autoprefixer & Plugin Config
16:17 - postcss-preset-env
18:05 - Custom selectors, media, nesting
21:29 - PreCSS
24:13 - PostCSS Import & File Structure
28:42 - PostCSS Assets
31:52 - CSSNano - Věda a technologie
Why's their logo look like it's summoning demons??
😹 Yeah it looks like a devil's signs
CSS = Cool Son of Satan
@@derciojds
UryFjsjsussiistyujik
I've the same question lmao
It’s just geometric forms. 😂
Thanks Brad as usual your tutorials are top notch.
Hi, Brad, Your free courses on youtube channel are aluable kindly,
Before I have enrolled your courses, I've alreay followed your channel for months. I am so impressed by the value of content, also your effort put in it!
Thank you for keep giving us so many good educational videos for free.
Here for all the tutorials, big thumbs up.
Excellent tutorial about PostCSS plus some previews of next gen CSS stuff.
for those wants learn these small concepts and stuffs like PostCSS, like me, this video was very very helpful. tnx man. stay alive.
New great tutorial.
Thank you 💜
Thanks bro ❤️
Another awesome tutorial 🔥
Ah, damn, right on time :D I just needed such course, thanks!!!
thanks brad waiting for this one ♥️
Thank you so much sir I'll be waiting for it so along.
Thank you man. Great deep stuff.
thanks brad, it is on time i am messing with postcss now.
Now I know why I used to watch your videos so much
Thank you Brad. 🙏
Would you kindly consider making a video about your preferred way to build a web app that uses some sort of calendar/cron--based mechanism (eg. sending reminder emails at specific dates, intervals)? It would be interesting to see what kind of stack you'd use.
Cool course👍
Awesome... Thanks 💙
Great tutorial brad ♥️ Please make a video on react table v8.. with features like sorting, global filter, column filter, grouping, pagination etc. All react table tutorials are for v7.. but v8 is much more different than v7
Thank you Brad
Well, thanks to you I just learned that nesting is now possible in native CSS...... but when I looked it up on the web, apparently as of today it is not implemented on any browser yet lol I guess we shouldn't using nesting in vanilla CSS at all at this point.
Anyway regarding Post CSS, it was really clear and interesting so thank you :D
Thank you mane!
Awesome!!!
Thanks man.
Very nice. Just what I needed! One issue: The "precss" page on NPM says the package is deprecated. Any alternatives?
so many packages installed 💀, would stick to sass then💀😂😂
thanks as always for the tutorial brad💯🙏🏽
thanks brad
Never knew that PostCSS is as powerfull as this 😄
Wow nice one.
What a coincidence. I was just about to learn postcss.
Thank you
Thank you!!! Recently discovered your courses on Udemy and then found your videos on CZcams as well! Very very informative! To the point! So, i can learn very useful stuff, very quickly! Thank you!👍🫡
Hey Brad, great video, but i've got a problem with precss, i installed and put in on postcss.config an then run it but the input file thinks its an error, can you help?
Hello Brad, precss is deprecated, can you tell me how I can workaround this as I am very used to sass variables and would love to work with them using PostCSS. It would seem precss is dead on github and won't upgrade to the new version of PostCSS.
Are you spying on me, because I was thinking about learning about PostCSS...?
Regardless, I'm happy for this!
Brad, give us a tutorial using nextJs13. Thanks ❤️
Are there also plugins for javascript file to optimize it?
Does any one know the name of the font Brad is using? :) I've been looking all over the place for it and can not find it :) Thankyou ^^
hey brad, is it possible if you do chakraui course? thanks
@import for sass is deprecated no? In favor of @use? Or am I too early 😂
👍
Hi Brad what is your next course?? What about Modern Javascript and Vue js?
Vue js? Nah
Next Js 13 please!
Aws multiple way to deploy mern stack, please make a video
My css is working on my style.css but in my input.css there is yellow lines and error on my css code but it's working how can I remove them ?
Solved it , btw thanks for this awesome tutorial
Waiting for you nextjs 13 upgrades
In the PostCSS config from TailwindCSS config they don't use "require("autoprefixer")", just "autoprefixer: {}". Why the difference? Also, the plugins is not an array, but an object.
dude, tnx for asking this question.
so I asked ChatGPT about your question. you can ask it too.
but I found that: in PostCSS you can use two ways to requiring a plugin.
first. using `require()`
second. using obj form.
and u man ask what's the difference? in the second way, you can customise the plugin and set some configurations for it. in the first way, you just straightforward requiring only the plugin, without any thing else (like configuration and ect.) but in the other way, you have more flexibility. also, ChatGPT says: "Different versions of PostCSS or various build tools might prefer one syntax over the other for compatibility or ease of use."
I hope it's helpful.
How convert all my asset to webp on build
First to comment
This is little bit like tailwindcss without class and power of sass ! and lot of plugins required
Sir Create Video Sharing Platform, CZcams similar website
1st view
I've used Sass and PostCSS, and prefer Sass.
hello
TOOOOOOO MUCH TALKING
Bro, what postcss extension are you using in vscode?
How can we deploy this ??
Dats right, you better delete your tweets on El0n. >;->