Responsive QR Code Component using TailwindCSS

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!
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@john-mirage
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 - @correlucas
👾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!
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