Use Laravel Mix to install TailwindCSS in your Shopify projects

As you might have seen some of my videos of shopify, and how easy it was to port TailwindCSS to my shopify project was just insane. That's the magic of Laravel Mix Library. Here is a quick review guide on how to import Laravel Mix in any of your projects using Webpack. Laravel Mix Docs

Follow this guide to quickly scaffold laravel mix in any project

First install Laravel Mix in your project

npm install laravel-mix --save-dev

If you already have Laravel Project, you don't need to install it, else you've to import webpack.config.js file in your project folder.

const mix = require("laravel-mix");

Next step is crucial to understand, as laravel mix uses commands similar to these to import JS, CSS, and other files. If you are familiar with webpack, you'll understand how this is a great wrapper around webpack to do the dirty work.

mix.js('src/app.js', 'dist').setPublicPath('dist');

You can run the commands like npx mix to run these and import files. Feel free to watch my shopify tailwindcss video to get more insight into it.