Tailwindcss-setup.md

Dependencies

yarn add laravel-mix laravel-mix-purgecss cross-env tailwindcss postcss-import postcss-nesting

Installation

cp -r node_modules/laravel-mix/setup/webpack.mix.js ./
node_modules/.bin/tailwind init

package.json scripts

"scripts": {
  "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "npm run dev -- --watch",
}

webpack.mix.js

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

mix
    .postCss('src/css/app.css', 'public/css')
    .options({
        postCss: [
            require('postcss-import')(),
            require('tailwindcss')('./tailwind.js'),
            require('postcss-nesting')(),
        ]
    })
    .purgeCss()

Tailwindcss imports

@tailwind preflight;
@tailwind components;
@tailwind utilities;