PostCSS Crash Course
HTML-код
- Опубликовано: 28 май 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 
Наука
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. 😂
Here for all the tutorials, big thumbs up.
for those wants learn these small concepts and stuffs like PostCSS, like me, this video was very very helpful. tnx man. stay alive.
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.
Excellent tutorial about PostCSS plus some previews of next gen CSS stuff.
Ah, damn, right on time :D I just needed such course, thanks!!!
Thank you so much sir I'll be waiting for it so along.
thanks brad, it is on time i am messing with postcss now.
New great tutorial.
Thank you 💜
Thanks bro ❤️
Another awesome tutorial 🔥
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.
Thank you man. Great deep stuff.
thanks brad waiting for this one ♥️
Now I know why I used to watch your videos so much
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
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
Cool course👍
Very nice. Just what I needed! One issue: The "precss" page on NPM says the package is deprecated. Any alternatives?
Thank you Brad. 🙏
Awesome... Thanks 💙
Thank you Brad
Thank you mane!
Thank you!!! Recently discovered your courses on Udemy and then found your videos on RUclips as well! Very very informative! To the point! So, i can learn very useful stuff, very quickly! Thank you!👍🫡
What a coincidence. I was just about to learn postcss.
Awesome!!!
Never knew that PostCSS is as powerfull as this 😄
so many packages installed 💀, would stick to sass then💀😂😂
thanks as always for the tutorial brad💯🙏🏽
Wow nice one.
thanks brad
Thanks man.
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?
Thank you
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.
@import for sass is deprecated no? In favor of @use? Or am I too early 😂
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 ^^
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
Hi Brad what is your next course?? What about Modern Javascript and Vue js?
Vue js? Nah
hey brad, is it possible if you do chakraui course? thanks
Are you spying on me, because I was thinking about learning about PostCSS...?
Regardless, I'm happy for this!
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.
Aws multiple way to deploy mern stack, please make a video
Next Js 13 please!
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, RUclips similar website
I've used Sass and PostCSS, and prefer Sass.
1st view
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. >;->