Skip to content

Instantly share code, notes, and snippets.

@torian257x

torian257x/app.blade.php

Last active April 26, 2021 07:29
Show Gist options
  • Save torian257x/7cf182e794e515d068159ad71fcf7855 to your computer and use it in GitHub Desktop.
Save torian257x/7cf182e794e515d068159ad71fcf7855 to your computer and use it in GitHub Desktop.
Download ZIP
multi build of laravel mix with performance improvement for tailwindcss "yarn hot" -> javascript as hot, tailwind as watch
Raw
app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('plugins/popper/popper.min.js') }}" defer></script>
<script src="{{ asset('plugins/jquery/jquery.min.js') }}" defer></script>
<script src="{{ mix('js/tasl.js') }}" defer></script>
<script src="{{ mix('js/tasl_admin.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/tailwind.css') }}" rel="stylesheet">
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="flex items-center justify-between flex-wrap bg-blue-500 p-6">
<div class="">
<div class="">
<!-- Right Side Of Navbar -->
<ul class="flex items-center justify-start flex-wrap">
<li class="px-2">
<a class="" href="{{ url('/') }}">
Admin
</a>
</li>
<li class="px-2">
<a id="navbarDropdown" class="" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class=""></span>
</a>
<div class="" aria-labelledby="navbarDropdown">
<a class="" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
</ul>
</div>
</div>
</nav>
<main class="">
@yield('content')
</main>
</div>
</body>
</html>
Raw
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 --env.mixfile=webpack.mix.normal.js",
"devtail": "npm run developmenttail",
"developmenttail": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.mix.tailwind.js",
"watchnormal": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.mix.normal.js",
"watch": "npm run development -- --watch",
"watchtail": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.mix.tailwind.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "concurrently \"yarn hotnormal\" \"yarn watchtail\"",
"watchall": "concurrently \"yarn watchnormal\" \"yarn watchtail\"",
"hotnormal": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.mix.normal.js",
"hottail": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.mix.tailwind.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"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-decorators": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"@tailwindcss/custom-forms": "^0.2.1",
"@types/react": "^16.9.47",
"@types/react-dom": "^16.9.8",
"axios": "^0.19",
"concurrently": "^5.3.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "5.0.4",
"laravel-mix-merge-manifest": "^0.1.2",
"laravel-mix-purgecss": "^5.0.0",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"typescript": "^3.9.6"
},
"dependencies": {
"@types/react-router-dom": "^5.1.5",
"@types/react-select": "^3.0.14",
"@types/react-window": "^1.8.2",
"formik": "^2.1.5",
"laravel-mix-react-typescript-extension": "^1.0.3",
"object-to-formdata": "^4.1.0",
"postcss-import": "^12.0.1",
"react-hot-loader": "^4.12.21",
"react-router-dom": "^5.2.0",
"react-select": "^3.1.0",
"react-window": "^1.8.5",
"tailwindcss": "^1.4.6",
"tailwindcss-empty-pseudo-class": "^1.0.0",
"zustand": "^3.0.1"
}
}
Raw
tailwind.scss
@tailwind base;
h1 {
@apply text-3xl font-bold;
}
h2 {
@apply text-xl font-bold;
}
h3 {
@apply text-lg font-bold;
}
a {
@apply text-tasl-blue-d underline;
}
@tailwind components;
.tasl-btn2{
@apply bg-transparent border-0 rounded text-tasl-blue-m py-1 px-1 transition-all duration-300 inline-block;
}
.tasl-btn2:hover{
@apply bg-gray-100 cursor-pointer;
}
.tasl-btn{
@apply py-16 px-2 rounded inline-block transition-all duration-300;
}
.tasl-btn:hover{
@apply cursor-pointer;
}
.tasl-btn-brown{
@apply bg-tasl-brown-m text-white shadow-md;
}
.tasl-btn-brown:hover{
@apply bg-tasl-blue-l bg-tasl-blue-m cursor-pointer shadow-lg;
}
.tasl-btn-blue{
@apply bg-tasl-blue-m text-white shadow-sm;
}
.tasl-btn-blue:hover{
@apply bg-tasl-blue-d shadow-md;
}
.tasl-error{
@apply bg-red-100 text-black border-red-600 border p-3;
}
fieldset{
@apply border rounded p-2 bg-white;
}
fieldset.tasl-is-active{
@apply border-gray-700;
}
fieldset[disabled]{
@apply border-gray-300 bg-gray-100;
}
section[disabled]{
@apply border-gray-300 bg-gray-100;
}
Raw
tailwind_utilities.scss
@tailwind utilities;
Raw
webpack.mix.normal.js
const mix = require('laravel-mix');
require("laravel-mix-react-typescript-extension");
require('laravel-mix-purgecss');
require('laravel-mix-merge-manifest');
mix
.copy('resources/js/tasl.js', 'public/js').reactTypeScript('resources/js/tasl_admin.tsx', 'public/js')
.sass('resources/sass/app.scss', 'public/css').options(
{
processCssUrls: false
}
);
mix.mergeManifest();
Raw
webpack.mix.tailwind.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
require("laravel-mix-react-typescript-extension");
let atImport = require('postcss-import');
require('laravel-mix-purgecss');
require('laravel-mix-merge-manifest');
mix.sass('resources/sass/tailwind.scss', '../build/css')
.sass('resources/sass/tailwind_utilities.scss', '../build/css')
.purgeCss({
enabled: false, //mix.inProduction(),
content: [
'./resources/views/**/*.blade.php',
'./resources/js/**/*.js',
'./resources/js/**/*.jsx',
'./resources/js/**/*.tsx',
]
})
.options({
processCssUrls: false,
postCss: [
atImport(), tailwindcss('tailwind.config.js')],
})
.combine(
[`build/css/tailwind.css`, `build/css/tailwind_utilities.css`],
`public/css/tailwind.css`)
.mergeManifest();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment