Tailwind CSS v2.0 | Laravel Mix 6 & SASS Setup & Install

Install Tailwind Css v2.0 with Laravel Mix.

Mix is a wrapper that simplifies setting up webpack. We'll take a look at installing Tailwind Css v2.0 with Sass. Have the ability to write Vanilla Javascript with ES6 Syntax and have it compile for the browser to understand. All with Hot live reloading with browserSync.

This will provide a base for developing website/apps using tailwind, sass and vanilla js when you're not using a frontend framework.

Source Code
github.com/codewithchu/tailwindcss-v2-mix6-sass

Video Sections:
00:00 Overview
01:40 Setup Project
02:30 Install Laravel Mix 6
04:51 Install Tailwind Css v2
08:00 Config Sass, PostCss and browserSync
12:45 Setup NPM Scripts
14:45 Vanilla JS with Es6 Syntax
16:28 Sass with Tailwind
17:35 Markup Demo with Tailwind Css v2.0
21:34 Build for Production
22:08 Recap
24:12 Outro

Subscribe and Learn to codewithchu
   / @codewithchu  

MacOS Tutorial Series
   • macOS Web Development Setup  

Resources
--------------------------------------------------------------
TailwindCss - tailwindcss.com/
Laravel Mix - laravel-mix.com/
Sass - sass-lang.com/
BrowserSync - browsersync.io/
NodeJs - .nodejs.org/
VScode - code.visualstudio.com/

Connect with codewithchu
--------------------------------------------------------------
arthurchu.ca/
twitter.com/codewithchu
www.instagram.com/codewithchu
www.facebook.com/codewithchu
github.com/codewithchu