danielstgt

<template>
    <svg>
        <use :href="symbolId" />
    </svg>
</template>

<script>
export default {
    props: ['icon'],

danielstgt

<template>
    <svg v-bind="svgAttributes" v-html="svgContent"></svg>
</template>

<script>
export default {
    props: ['icon'],

    data() {
        return {

danielstgt

<template>
    <svg
        v-bind="svgAttributes"
        v-html="svgContent"
    >
    </svg>
</template>

<script>
export default {

danielstgt

@layer utilities {
    .pb-safe {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

danielstgt

Useful Redirect Headers

Set a max age

Cache-Control: max-age=3600

The max-age=N response directive indicates that the response remains fresh until N seconds after the response is generated.

danielstgt

namespace App\Providers;

use DB;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *

danielstgt

{
    "rules": {
        "@PSR2": true,
        "ordered_imports": {
            "sort_algorithm": "length"
        },
        "array_syntax": {
            "syntax": "short"
        },
        "no_unused_imports": true,

danielstgt

/* is not a touch device */
@media (hover: hover) {
    body { text-rendering: optimizeLegibility; }
}

/* is a touch device */
@media (hover: none) {
    body { text-rendering: optimizeSpeed; }
}

danielstgt

Usage

Use a js or no-js variant depending on the availability of JavaScript, e.g. no-js:hidden or js:bg-blue-500.

Tailwind CSS Config

const plugin = require('tailwindcss/plugin');

module.exports = {

danielstgt

MIX_JS_DEBUG="${APP_DEBUG}"