How to Build Project with Laravel Mix, Tailwind, & PostCSS without any framework

Step 1. Install Mix

Install Laravel as a dev dependency

mkdir my-app && cd my-app
npm init -y
npm install laravel-mix --save-dev

Step 2. Create a Mix Configuration File

Next, create a Mix configuration file within the root of your new project.

touch webpack.mix.js

You should now have the following directory structure:

• node_modules/
• package.json
• webpack.mix.js

webpack.mix.js is your configuration layer on top of webpack. Most of your time will be spent here.

Step 3. Add code in webpack.mix.js

// webpack.mix.js

let mix = require('laravel-mix');

mix
    .js('source/js/app.js', 'public/js')
    .postCss('source/css/app.css', 'public/css', [
        require('@tailwindcss/postcss'),
    ])
    .webpackConfig({
        watchOptions: {
            ignored: [
                '**/node_modules/**',
                '**/public/**',
                '**/mix-manifest.json'
            ]
        }
    });

Replace the source and public/build paths according to your projects.
Exclude the build folder in '/public/'

Step 4. Install Tailwind CSS with Post CSS

npm install tailwindcss @tailwindcss/postcss postcss

Step 5: Add the code in your source css file, in our case it is source/css/app.css

@import "tailwindcss";
@source "./*.html";
@source "./source/**/*.{js,css}";

Replace the paths in @source directive which you want the Tailwind to look for changes

Step 5. Add scripts in package.json

"dev": "npx mix watch",
"build": "npx mix --production"

Run deb command to start the Laravel Mix watcher, npm run dev

Once you are done with development, run the build command, npm run build