Tailwind CSS v2.0 | WordPress Theme Setup & Install

by | Dec 18, 2020 | 0 comments

Tailwind CSS v2.0 | WordPress Theme Setup & Install

by | Dec 18, 2020 | CSS Tips and Tricks | 0 comments



Install Tailwind Css v2.0 to your WordPress Theme.

In this video we’ll install Laravel Mix with npm to add webpack, sass pre-processor, hot live refresh with BrowserSync and Tailwindcss v2.0. This will greatly improve the frontend development setup on a vanilla WordPress Theme.

Github Source
https://github.com/codewithchu/tailwindcss-v2-wp-theme

Video Sections:
00:00 Overview
03:48 WordPress Theme
04:52 Install Laravel Mix
07:45 Install TailwindCss v2 Compatibility Build
10:23 Tailwind Source Css File
12:19 Tailwind Config
16:40 Laravel Mix Config
19:20 BrowerSync
21:00 Add built css file to Theme
23:05 Test TailwindCss Utility Classes
25:33 Build for Production
26:24 Recap
27:25 Outro

Subscribe and Learn to codewithchu
https://www.youtube.com/channel/UCSyosm-WcUPT4LnUIIdqSCw

MacOS Tutorial Series

Resources
————————————————————–
Wordpress – https://wordpress.org
Laravel Mix – https://laravel-mix.com
TailwindCss – https://tailwindcss.com
Laravel Valet – https://laravel.com/docs/8.x/valet
PHP – https://www.php.net
MySQL – https://www.mysql.com
Composer https://getcomposer.org
NodeJs – .https://nodejs.org
VScode – https://code.visualstudio.com

Connect with codewithchu
————————————————————–
https://arthurchu.ca

https://www.instagram.com/codewithchu
https://www.facebook.com/codewithchu
https://github.com/codewithchu

source