Frontend Mentor | Grace Birindwa's profile

@kevatoloco

Submitted over 1 year ago

This is my first time using tailwind. I was wondering if there could be more efficient ways to structure or write my code. What are some good practices that I am missing? Thank you!

Results Summary Component using React and Tailwind

Grace Birindwa• 530

@gracebir

Posted over 1 year ago

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

Grace Birindwa

All comments

Results Summary Component using React and Tailwind

Results Summary Component using React and Tailwind