lbssousa

Tailwind CSS best practices

Utility classes

1. When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!

2. Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.

3. Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use block lg:flex lg:flex-col lg:justify-center instead of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the

lbssousa

/*
 * Usage in a component:
 *
 * import { createComponent } from '@vue/composition-api'
 * import { useTailwindBreakpoints } from 'path/to/useTailwindBreakpoints'
 * import tailwindConfig from 'tailwind.config.js'
 *
 * interface Props {
 *   (...)
 * }

lbssousa

<template>
  <div>
    <slot/>
  </div>
</template>

<script>
// @ts-check

/**

lbssousa

GENERAL INSTRUCTIONS
--------------------

1. Under your src-electron/ folder, create a folder called ppapi-flash-plugin and separate subfolders for your
   supported platforms (linux, win32, darwin) and architectures (ia32, x64).

2. Under each platform/architecture subfolder, put a copy of the plugin binary and manifest.json companion file.
   If needed, rename the binary files to pepflashplayer.dll (Windows), PepperFlashPlayer.plugin (macOS)
   or libpepflashplayer.so (Linux).

lbssousa

<template>
  (...)
  <parallax-scene :scalar-x="25" :scalar-y="15">
    <parallax-layer :depth="0.00">
      <img src="~assets/parallax/0_sun.png" style="position: relative; top: -4px;" draggable="false" alt="">
    </parallax-layer>
    <parallax-layer :depth="0.33">
      <img src="~assets/parallax/1_mountains.png" style="position: relative; top: 40px;" draggable="false" alt="">
    </parallax-layer>
    <parallax-layer :depth="0.67">

lbssousa

# -*- mode: ruby -*-
# vi: set ft=ruby :

$script = <<ENDSCRIPT
Home="/home/ubuntu"

# Altere os valores abaixo de acordo com o seu banco
Modulo="warsaw_setup_64.deb"
UrlModulo="https://guardiao.itau.com.br/warsaw/${Modulo}"
UrlBanco="http://www.itau.com.br"

lbssousa

# -*- mode: ruby -*-
# vi: set ft=ruby :

$script = <<ENDSCRIPT
Home="/home/ubuntu"

# Altere os valores abaixo de acordo com o seu banco
Modulo="GBPCEFwr64.deb"
UrlModulo="https://cloud.gastecnologia.com.br/cef/warsaw/install/${Modulo}"
UrlBanco="http://www.caixa.gov.br"