Skip to content
Submitted about 2 years ago

Responsive QR Code Component using TailwindCSS

Wyatt•80
@00Wyatt
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Does anybody know the best way to customize the default font in a project using Tailwind?

I am new to using TailwindCSS, so any other tips are appreciated!

Community feedback

  • John Mirage•1,590
    @john-miragePosted about 2 years ago

    For me the best way is this:

    learn more on the tailwind documentation

    this will take the defaultTheme font family stack and add your font in first position. Offcourse if your font is a mono font or a serif font, overwrite the good property (serif or mono) and load the correct stack (defaultTheme.fontFamily.serif or defaultTheme.fontFamily.mono).

    /** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'font name',
          ...defaultTheme.fontFamily.sans,
        ],
      },
    },
  },
}
    Marked as helpful
    0
    Wyatt•80
    @00WyattPosted about 2 years ago

    @john-mirage hey that worked thanks!

    0
  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello Wyatt, Congratulations on completing this challenge!

    The html structure is fine and works, but you can reduce at least 20% of your code cleaning the unnecessary elements, you start cleaning it by removing some unnecessary <div>. For this solution you wrap everything inside a single block of content using <div> or <main> (better option for accessibility) and put inside the whole content <img> / <h1> and <p>.

    <body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

    ✌️ I hope this helps you and happy coding!

    0
    Wyatt•80
    @00WyattPosted about 2 years ago

    I'll try that, thanks.

    0

Please log in to post a comment

Log in with GitHub

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