Theo's Typesafe Cult•3y ago

Little Breakpoint Utility Component Help

Hi guys, i'm trying to write a little breakpoint utility component... i must be doing something really silly wrong... if i uncomment the "Size" line, it works, but the container is still not bg-red-500, and the word Size never shows up anywhere.. if i leave it commented, it doesnt work Why? what is going on? so odd

import React from "react";
import tw from "tailwind-styled-components";

type Props = {};

const BreakpointDebug = (props: Props) => {
  return (
    <BreakpointDebugContainer>
{/* Size */}
      <Mobile>Mobile</Mobile>
      <SM>SM</SM>
      <MD>MD</MD>
      <LG>LG</LG>
      <XL>XL</XL>
      <XXL>2XL</XXL>
    </BreakpointDebugContainer>
  );
};

const BreakpointDebugContainer = tw.div`
  BreakpointDebugContainer
  bg-red-500
  fixed
  top-10 right-0 h-16 w-16
  text-white
`;
const Mobile = tw.div`
  block sm:hidden md:hidden lg:hidden xl:hidden 2xl:hidden
`;

const SM = tw.div`
  hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden w-0 h-0
`;
const MD = tw.div`
  hidden sm:hidden md:block lg:hidden xl:hidden 2xl:hidden
`;

const LG = tw.div`
  hidden sm:hidden md:hidden lg:block xl:hidden 2xl:hidden
`;

const XL = tw.div`
  hidden sm:hidden md:hidden lg:hidden xl:block 2xl:hidden
`;

const XXL = tw.div`
  hidden sm:hidden md:hidden lg:hidden xl:hidden 2xl:block
`;

export default BreakpointDebug;

import React from "react";
import tw from "tailwind-styled-components";

type Props = {};

const BreakpointDebug = (props: Props) => {
  return (
    <BreakpointDebugContainer>
{/* Size */}
      <Mobile>Mobile</Mobile>
      <SM>SM</SM>
      <MD>MD</MD>
      <LG>LG</LG>
      <XL>XL</XL>
      <XXL>2XL</XXL>
    </BreakpointDebugContainer>
  );
};

const BreakpointDebugContainer = tw.div`
  BreakpointDebugContainer
  bg-red-500
  fixed
  top-10 right-0 h-16 w-16
  text-white
`;
const Mobile = tw.div`
  block sm:hidden md:hidden lg:hidden xl:hidden 2xl:hidden
`;

const SM = tw.div`
  hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden w-0 h-0
`;
const MD = tw.div`
  hidden sm:hidden md:block lg:hidden xl:hidden 2xl:hidden
`;

const LG = tw.div`
  hidden sm:hidden md:hidden lg:block xl:hidden 2xl:hidden
`;

const XL = tw.div`
  hidden sm:hidden md:hidden lg:hidden xl:block 2xl:hidden
`;

const XXL = tw.div`
  hidden sm:hidden md:hidden lg:hidden xl:hidden 2xl:block
`;

export default BreakpointDebug;

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Little Breakpoint Utility Component Help