Webpack 5 CSS Walkthrough: Sass, PostCSS and more!

A thorough walkthrough of setting up different CSS configurations for Webpack 5. This includes basic CSS, SASS, PostCSS with fallbacks and autoprefixer plugins, Injected inline styles vs css files for output, and a quick Tailwind setup to top it all off. I'll be touching on development vs production setups and source maps as well, with the goal of the giving you understanding and confidence in setting up or customizing your own Webpack with whatever your CSS needs are. 00:00 - What we'll cover 01:17 - Note on Webpack basics video 01:47 - Creating the project 04:30 - Adding CSS import functionality 12:44 - Adding SASS/SCSS support 16:39 - Regex breadown for CSS + SCSS + SASS 18:36 - Outputing a .css file instead of inline css 22:00 - Sourcemaps for debugging 25:36 - PostCSS with autoprefixer and fallbacks 31:37 - Browserslist for more cross-browser control 34:00 - Adding Tailwind to show the flexibility of our setup 36:53 - Wrap-up Webpack Basics Walkthrough: https://www.youtube.com/watch?v=X1nxTjVDYdQ&feature=youtu.be Repository for reference: https://github.com/Jimmydalecleveland/webpack-starters/tree/sass-postcss Follow Jimmy Cleveland's doings: twitter: https://twitter.com/JimmyDCleveland blog: https://blog.jimmydc.com/ #webpack #postcss #tailwindcss