ben-rogerson

<picture>
    <source
        srcset="/some/_1170x658_crop_center-center/man-with-a-dog.webp 1170w,
                /some/_970x545_crop_center-center/man-with-a-dog.webp 970w,
                /some/_750x562_crop_center-center/man-with-a-dog.webp 750w,
                /some/_320x240_crop_center-center/man-with-a-dog.webp 320w"
        sizes="100vw"
        type="image/webp"
    />
    <source

ben-rogerson

We couldn’t find that file to show.

ben-rogerson

module.exports = {
  twin: {
    styled: 'styled-components'
  }
}

ben-rogerson

import React from 'react';
import { useMinScreen } from './minScreen';

const App = () => {
  const { min } = useMinScreen();

  return (
    <>
      {min`md` && <div>I'll show at md and up</div>}
      {!min`lg` && <div>I'll show at up to lg</div>}

ben-rogerson

{
  // Snippits that make working with Twin a little easier
  // https://github.com/ben-rogerson/twin.macro
  "Add react import": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "react",
    "body": "import React from 'react'",
    "description": "Add react import"
  },
  "Add twin imports": {