PostCSS Crash Course

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

[@spreadItWide]

Why's their logo look like it's summoning demons??

[@derciojds]

😹 Yeah it looks like a devil's signs

[@marekbee]

CSS = Cool Son of Satan

[@kevinnjoroge3561]

@@derciojds UryFjsjsussiistyujik

[@adarsh-chakraborty]

I've the same question lmao

[@semikolondev]

It’s just geometric forms. 😂

[@bogdanlupu3679]

Thanks Brad as usual your tutorials are top notch.

[@entrepreneurzee]

Here for all the tutorials, big thumbs up.

[@littleoddboy]

for those wants learn these small concepts and stuffs like PostCSS, like me, this video was very very helpful. tnx man. stay alive.

[@paulthomas1052]

Excellent tutorial about PostCSS plus some previews of next gen CSS stuff.

[@monles2352]

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.

[@petarkolev6928]

Ah, damn, right on time :D I just needed such course, thanks!!!

[@walidallaf6057]

Thanks bro ❤️ Another awesome tutorial 🔥

[@almhdy24]

New great tutorial. Thank you 💜

[@parvezmosharraf6522]

Thank you so much sir I'll be waiting for it so along.

[@cipherlofi6453]

thanks brad, it is on time i am messing with postcss now.

[@motsi9593]

Thank you man. Great deep stuff.

[@aneliayacheva6671]

Now I know why I used to watch your videos so much

[@kirkpatrikolis273]

thanks brad waiting for this one ♥️

[@aram5642]

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.

[@rickythegermanshepherd5438]

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

[@gambomaster]

Thank you Brad. 🙏

[@webWithMe]

Cool course👍

[@flojj]

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

[@MohammedAbdulMohaiman]

Awesome... Thanks 💙

[@indaneeydesign165]

Thank you Brad

[@herosimobiko]

Never knew that PostCSS is as powerfull as this 😄

[@jssecrets]

Thank you mane!

[@wisdomelue]

so many packages installed 💀, would stick to sass then💀😂😂 thanks as always for the tutorial brad💯🙏🏽

[@jeffsuddaby4788]

Very nice. Just what I needed! One issue: The "precss" page on NPM says the package is deprecated. Any alternatives?

[@glitchspark1663]

What a coincidence. I was just about to learn postcss.

[@sourabhshukla8625]

thanks brad

[@Bawaromerali]

Thanks man.

[@champorado2131]

Wow nice one.

[@lifeisbeautifu1]

Thank you

[@chanmyaemaung]

Awesome!!!

[@luishenriqueandradepellizz680]

Brad, give us a tutorial using nextJs13. Thanks ❤️

[@akam9919]

Are you spying on me, because I was thinking about learning about PostCSS...? Regardless, I'm happy for this!

[@shauntonesify]

@import for sass is deprecated no? In favor of @use? Or am I too early 😂

[@nvrp]

Thank you!!! Recently discovered your courses on Udemy and then found your videos on KZbin as well! Very very informative! To the point! So, i can learn very useful stuff, very quickly! Thank you!👍🫡

[@Whovianpancake]

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.

[@carlosz1858]

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?

[@Tony.Nguyen137]

Are there also plugins for javascript file to optimize it?

[@zedshockblade7157]

Next Js 13 please!

[@blxckmage]

hey brad, is it possible if you do chakraui course? thanks

[@armanahmed4806]

Hi Brad what is your next course?? What about Modern Javascript and Vue js?

[@coderlicious6565]

Vue js? Nah

[@mohamedabdulla8097]

Waiting for you nextjs 13 upgrades

[@AnDi-tx2xh]

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 ^^

[@Venkatesh-vm4ll]

Aws multiple way to deploy mern stack, please make a video

[@OnePiece_Fandom]

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 ?

[@OnePiece_Fandom]

Solved it , btw thanks for this awesome tutorial

[@aashishpudasaini4418]

👍

[@AmodeusR]

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.

[@littleoddboy]

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.

[@moneyfr]

How convert all my asset to webp on build

[@bowendsom]

This is little bit like tailwindcss without class and power of sass ! and lot of plugins required

[@amsebookstore3765]

Sir Create Video Sharing Platform, KZbin similar website

[@nomad100hd]

I've used Sass and PostCSS, and prefer Sass.

[@yasir269050]

First to comment

[@adders9978]

hello

[@SohailKhan-tc8uz]

1st view

[@henryg2350]

TOOOOOOO MUCH TALKING

[@truthteachers]

Bro, what postcss extension are you using in vscode?

[@oldgsteel]

How can we deploy this ??

[@socialkruption]

Dats right, you better delete your tweets on El0n. >;->