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.

[@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.

[@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.

[@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.

[@cipherlofi6453]

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

[@petarkolev6928]

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

[@parvezmosharraf6522]

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

[@kirkpatrikolis273]

thanks brad waiting for this one ♥️

[@almhdy24]

New great tutorial. Thank you 💜

[@walidallaf6057]

Thanks bro ❤️ Another awesome tutorial 🔥

[@aneliayacheva6671]

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

[@motsi9593]

Thank you man. Great deep stuff.

[@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. 🙏

[@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

[@webWithMe]

Cool course👍

[@MohammedAbdulMohaiman]

Awesome... Thanks 💙

[@indaneeydesign165]

Thank you Brad

[@jssecrets]

Thank you mane!

[@glitchspark1663]

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

[@chanmyaemaung]

Awesome!!!

[@herosimobiko]

Never knew that PostCSS is as powerfull as this 😄

[@jeffsuddaby4788]

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

[@Bawaromerali]

Thanks man.

[@wisdomelue]

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

[@sourabhshukla8625]

thanks brad

[@champorado2131]

Wow nice one.

[@lifeisbeautifu1]

Thank you

[@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!

[@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?

[@blxckmage]

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

[@shauntonesify]

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

[@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

[@armanahmed4806]

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

[@coderlicious6565]

Vue js? Nah

[@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!👍🫡

[@zedshockblade7157]

Next Js 13 please!

[@mohamedabdulla8097]

Waiting for you nextjs 13 upgrades

[@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

[@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

[@aashishpudasaini4418]

👍

[@yasir269050]

First to comment

[@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

[@SohailKhan-tc8uz]

1st view

[@nomad100hd]

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

[@adders9978]

hello

[@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. >;->