Submitted 6 months ago

QR code component using React, Tailwind and CSS BEM

Florian Frosch•60

@ffrosch

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I like the lightweight setup with React and Tailwind.

For the next time I would again try to find a solution which also lets me use CSS-in-JS or CSS Modules.

What challenges did you encounter, and how did you overcome them?

I wanted to establish using React, Tailwind and Emotion CSS for Frontend Mentor projects without the overhead of creating a new project with several hundred megabytes of packages everytime.

I quickly found a solution to use React and Tailwind with through CDN-delivered packages. But I did not find a way to make the same procedure work for Emotion CSS. In the end I mainly used vanilla CSS with BEM methodology.

What specific areas of your project would you like help with?

I could use some hints on how to make a CSS-in-JS library or CSS Modules work with my lightweight CDN approach.

Community feedback

Gwenaël Magnenat•1,270

@gmagnenatPosted 5 months ago

Hi Florian, Congrats for your submission! Interesting approach you have here with react and tailwind without any packages installed.

I don't know if you followed that path but you can easily add your custom CSS-in-JS in your project.

For example here I create an object with a few properties and a styles object.

function App() {
  // React.useEffect(() => {}, []);
  const properties = {
    space_s: "16px",
    space_m: "24px",

    radius_m: "20px",

    clr_white: "white",
    clr_grey_light: "#d5e1ef",
    clr_grey: "#7d889e",
    clr_navy_dark: "#1f314f",
    clr_blue: "#2c7dfa",
  }

  const styles = {
    card: {
      padding: properties.space_s,
      margin: properties.space_s,
      borderRadius: properties.radius_m,
      width: "320px",
      backgroundColor: properties.clr_white,
    },

    cardHeading: {
      fontSize: "22px",
      fontWeight: "bold",
      color: properties.clr_navy_dark,
      textAlign: "center",
      margin: properties.space_s,
      marginTop: "24px",
    }
  }

  return (
    <div className='card shadow-xl' style={styles.card}>
      <img
        className='card__qr-code'
        width='288'
        height='288'
        src='images/image-qr-code.png'
        alt='QR code'
      />
      <h1 className='card__heading' style={styles.cardHeading}>
        Improve your front-end skills by building projects
      </h1>
...

Let me know if this is helpful.

Best

Marked as helpful

Florian Frosch•60

@ffroschPosted 5 months ago

Hi Gwenaël, thanks for this inspiration, I haven't thought about doing it that way yet and look forward to trying it out :-)

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord