Grace Birindwa• 530
@gracebir
Posted
Hey Kevin, you did a great job. I would like to leave some feedbacks:
- About the Jsx structure in your App.js file, avoid putting a meta tag inside react component, what you can do instead is to put all links in the public/inde.html file. Means you need to remove the head here:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap" rel="stylesheet"/>
</head>
<div className='h-screen flex items-center justify-center'>
<div className='flex mobile:flex-col w-max font-hanken rounded-lg bg-white box-content drop-shadow-2xl'>
<div className='bg-gradient-to-b from-primary-100 to-primary-200 flex-1 text-center rounded-lg box-content p-6 w-max' >
<h1 className='pb-6 text-gray-300 font-bold'>
Your Result
</h1>
- for tailwindcss, the only one thing that you just have to understand that it is mobile-first based, which means you don't really need to override the screen size, for this tag,
<div className='flex mobile:flex-col w-max font-hanken rounded-lg bg-white box-content drop-shadow-2xl'>you could have<div className='flex flex-col lg:flex-row w-full font-hanken rounded-lg bg-white box-content drop-shadow-2xl'>, means flex-direction will be a column on mobile and row on desktop.
theme: {
screens: {
'lg': {'max': '1440px'},
// => @media (min-width: 375px) { ... }
'mobile': {'max':'375px'},
// => @media (min-width: 1440px) { ... }
},
extend: {
colors: {
'primary': {
100: 'hsl(252, 100%, 67%)',
200: 'hsl(241, 81%, 54%)',
},
Also by putting the screen property directly in the theme property, means you are overriding the existing tailwind class properties, if you want to create custom properties, put them in the extend property and create different names from existing class properties.
Marked as helpful
1
Kevin Nguyen• 10
@kevatoloco
Posted
Hello @gracebir! This is really helpful and I will definitely keep this in mind for my next challenge. Thank you so much. I really appreciate you for taking the time to give me feedback!
0
