View spinner.vue
<style type="text/css">
.spinner:after {
border-radius: 50%;
width: 1.5em;
height: 1.5em;
.spinner {
font-size: 10px;
View tailwind-screens.js
screens: {
'xs': '375px',
'sm': '510px',
'md': [
{'min': '670px', 'max': '767px'},
{'min': '900px'}
'lg': '1155px',
'xl': '1505px',
View SearchInput.vue
<div v-click-outside="close">
<label v-if="label" class="form-label" @click="open">{{ label }}:</label>
<div class="relative">
<div ref="input" @click="open" @focus="open" @keydown.down.prevent="open" @keydown.up.prevent="open" :class="{ focus: show, error: error }" class="form-input pr-6" :tabindex="show ? -1 : 0">
<slot v-if="value"></slot>
<div v-else-if="data.length === 0" class="text-grey-600">No options found</div>
<div v-else class="text-grey-600">Click to choose…</div>
<button type="button" @click.stop="clear" v-if="value" tabindex="-1" class="absolute p-2 inline-block text-grey-500 hover:text-amber-700" style="right: 4px; top: 8px;">
View Kernel.php
namespace App\Http;
use Illuminate\Foundation\Http\Kernel as HttpKernel;
class Kernel extends HttpKernel
// ...
View app.css
This file has been truncated, but you can view the full file.
/* Base */
/*! normalize.css v7.0.0 | MIT License | */
/* Document
========================================================================== */
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
View treeMap.php
Collection::macro('treeMap', function ($child, $parent, $callback) {
$buildTree = function (array $elements, $parentKey = null) use (&$buildTree, $child, $parent, $callback) {
$branch = [];
foreach ($elements as $element) {
if ($element[$parent] === $parentKey) {
$branch[] = $callback($element, $buildTree($elements, $element[$child]));
View Modal.vue
<style type="text/css">
.modal-mask {
z-index: 1000;
background-color: rgba(0, 0, 0, .6);
transition: opacity .3s ease;
.modal-container {
max-height: 80vh;
transition: transform .2s ease, max-width .1s ease;
View webpack.mix.js
let cssImport = require('postcss-import')
let cssNext = require('postcss-cssnext')
let glob = require('glob-all')
let mix = require('laravel-mix')
let purgeCss = require('purgecss-webpack-plugin')
let tailwind = require('tailwindcss')
mix.js('resources/assets/js/app.js', 'public/js')
.postCss('resources/assets/css/app.css', 'public/css/app.css', [
View forms.css
.form-label {
@apply .mb-2 .block .text-sm .text-dark;
.form-select {
@apply .p-2 .leading-normal .block .w-full .border .text-dark .bg-light .text-sm .font-sans .rounded .text-left .appearance-none;
&:focus {
# Clone the Tailwind repo locally
git clone tailwind
# Go to Tailwind folder
cd tailwind
# Install Tailwind JS dependencies
npm install
# Go to docs folder