mtvbrianking/tailwind-laravel-mix-setup.md

## tailwind-laravel-mix-setup.md

      
    Raw
  

              tailwind-laravel-mix-setup.md
            
          
    [Boot NPM]
vim package.json
{
  "private": true,
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

Install Tailwind via NPM
npm install tailwindcss --save-dev
Create a Tailwind config file
./node_modules/.bin/tailwind init tailwind.js
Use Tailwind in your css
vim assets/css/tailwind.css
@tailwind preflight;
@tailwind components;
@tailwind utilities;
Install laravel Mix
npm install laravel-mix --save-dev
Include Tailwind as a plugin in Laravel Mix
cp ./node_modules/laravel-mix/setup/webpack.mix.js ./
let mix = require('laravel-mix');

let tailwindcss = require('tailwindcss');

mix.postCss('assets/css/tailwind.css', 'public/css', [
  tailwindcss('./tailwind.js'),
]);
Add Laravel Mix NPM Scripts
vim package.json
{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "dependencies": {},
  "devDependencies": {
    "laravel-mix": "^3.0.0",
    "tailwindcss": "^0.7.2"
  }
}
Testing: public/index.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Tailwind Skeleton</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/tailwind.css">
    </head>
    <body class="bg-black font-sans text-grey-light">
        <div class="flex justify-center">
            <div class="text-5xl mt-32">
                Tailwind CSS
            </div>
        </div>
    </body>
</html>
npm install
npm run dev
php -S localhost:8000 -t public/
http://localhost:8000
Resources
SASS
PostCSS