adamwathan

/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

/* 
...
...
...other css
...

adamwathan

In 5 minutes, you’ll have a brand new clean Statamic site, with Tailwind CSS and PurgeCSS configured.

It assumes that you work on a Mac, you put your site in ~/sites and you use Laravel Valet.

All the credit go to Jack McDade and philipboomy, from whom I stole and adapt the build scripts and the PurgeCSS config, this is only a detailed write up of the process.

You'll need Yarn and Node. You can install them both in one command via Brew: brew install yarn

• If not already done, install Statamic CLI Tool

adamwathan

<div id="app">
  <renderless-component v-model="items">
    <div slot-scope="{ inputAttrs, inputEvents }">
      <div v-for="item in items">
        <input v-bind="inputAttrs" v-on="inputEvents(item)">
      </div>
    </div>
  </renderless-component>
</div>

adamwathan

<?php

namespace App\Providers;

use Illuminate\Http\Request;
use Illuminate\Routing\Route;
use Illuminate\Support\ServiceProvider;
use App\Http\Middleware\CaptureRequestExtension;

class AppServiceProvider extends ServiceProvider

adamwathan

<snippet>
    <content><![CDATA[
<template>
  ${0}
</template>

<script>
  export default {
    props: [${1}],
    data() {

adamwathan

<?php

namespace App\Rules;

use Illuminate\Contracts\Validation\Rule;

class Uppercase implements Rule
{
    public function passes($attribute, $value)
    {

adamwathan

:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);

  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);

adamwathan

// Creates a new promise that automatically resolves after some timeout:
Promise.delay = function (time) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, time)
    })
}

// Throttle this promise to resolve no faster than the specified time:
Promise.prototype.takeAtLeast = function (time) {
    return new Promise((resolve, reject) => {

adamwathan

<?php

use Illuminate\Contracts\Validation\Rule;

class ValidPaymentToken implements Rule;
{
    private $gateway;
    private $param1;
    private $param2;

adamwathan

Troubleshooting Valet on Sierra

Common Problems

Problem: I just see "It works!"

Apache is running on port 80 and interfering with Valet.

1. Stop Apache: sudo /usr/sbin/apachectl stop
2. Restart Valet: valet restart