sandren

[{
    "id": 1,
    "name": {
      "english": "Bulbasaur",
      "japanese": "フシギダネ",
      "chinese": "妙蛙种子",
      "french": "Bulbizarre"
    },
    "type": [
      "Grass",

sandren

import React from 'react';
import GatsbyImage from 'gatsby-image';
import PropTypes from 'prop-types';

const Image = ({ objectFit, objectPosition, ...rest }) => {
  let wrapperStyles = {};
  let imageStyles = {};

  if (objectFit === 'contain') {
    wrapperStyles.width = '100%';

sandren

@tailwind base;

/*
 * Oldschool, top left anchored repeating backgrounds should be opt-in instead
 * of opt-out in 2022, lol.
 */
*,
*::before,
*::after {
  min-width: 0;

sandren

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

sandren

.text-6pt {
  font-size: 0.5rem;
}

.text-7pt {
  font-size: 0.58333rem;
}

.text-8pt {
  font-size: 0.66667rem;