Submitted over 1 year ago

QR Code Card

tailwind-css, svelte

kepper104•90

@kepper104

A solution to the QR code component challenge

Preview Code

Solution retrospective

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

I've set up a cool home/landing page that will contain links to all my future projects and put my first project, the QR Code, on it. Nothing I would do differently, it was a pretty small project.

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

Hosting the solution online, as creating a separate repo for each micro-page would be really cumbersome. I made a pretty aesthetically pleasing landing page (really proud of it) and a mono-repo SvelteKit + Tailwind app that will have all the projects in it.

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

As I am using Tailwind, usually my colors are just classes in the HTML. However because of the provided style guide with color codes I had to create separate CSS classes like so:

.text-paragraph-color {
    color: hsl(220, 15%, 55%);
}
.background-color {
    background-color: hsl(212, 45%, 89%);
}

Fortunately, because of Svelte CSS classes encapsulation and syntax, i just put style tags beside main HTML and used the custom color classes alongside Tailwind ones.

Code

Please log in to post a comment

Community feedback

Joramir Jr.•250
@JoramirJr
Posted over 1 year ago
Hey, @kepper104!

Your solutions looks great!

One tip I'd give you is to use the tailwind.config file for every style related to your overall project; meaning, styling that tend to be shared throughout the project; one recurrent example of that are font patterns, as is usually described on the style guide.

For example, when it comes to fonts, I import them on my main.css file like so:
```
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200;400&family=Bellefair:wght@200;400&display=swap');
```
Check out the file for the example above

then, on my tailwind.config, I usually do something like the following, as a key/value pair of the 'theme' object:
```
  fontFamily: {
      'Bellefair-Regular': ["Bellefair", "serif"],
      'Barlow-Condensed-Regular': ["Barlow Condensed", "sans-serif"],
    },
```
Check out the file for the example above

By gathering/organizing all of the default/shared styling in the tailwind.config file, you will better utilize the capabilities that TailwindCSS has to offer.

Btw, I have also used Svelte on recent projects; great tool!

Hope my tips are helpful!
Marked as helpful

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