background
bg-slate-800 //color
grid
grid place-content-center //center content on page
viewpoint
h-screen //give height of page to screen
margin
m-4
size
text-4xl
padding
p-5
rounded
rounded-2xl
shadow
shadow-xl
variable []
p-[2px]
Overwrite ( ! )
text-2xl //by default .text-2xl {font-size: 1.5rem/* 24px */;line-height: 2rem/* 32px */;} !leading-[1.5] // overwriting the line-height
We Want to give margin to every par but not at the end/last
mb-3 sm:mb-8 last:mb-0
CLSX
CLSX is a JavaScript utility for managing and creating CSS class names
CLSX is a smaller and faster replacement for the classnames module
CLSX is generally used to conditionally apply a given className
import clsx from 'clsx'; // or import { clsx } from 'clsx'; // Strings (variadic) clsx('foo', true && 'bar', 'baz'); //=> 'foo bar baz' // Objects clsx({ foo:true, bar:false, baz:isTrue() }); //=> 'foo baz' // Objects (variadic) clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' }); //=> 'foo --foobar' // Arrays clsx(['foo', 0, false, 'bar']); //=> 'foo bar' // Arrays (variadic) clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]); //=> 'foo bar baz hello there' // Kitchen sink (with nesting) clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya'); //=> 'foo bar hello world cya'
const [activeSection, setActiveSection] = useState("Home"); className={clsx("flex w-full items-center justify-center px-3 py-3 hover:text-grap hover:text-gray-950 transition", {"text-gray-950":activeSection === link.name})}