[React][CSS] 테일윈드 (TailWind) 자주쓰는 효과 정리

w : 가로 화면

h : 세로 화면

text-사이즈/색상 : 폰트 사이즈 및 색상 지정  

items-cetner : 가운데 정렬

p : 패딩

m : 마진

truncate : 텍스트가 길어지는 경우 ...으로 대체

 

 

 

• 참고용 작성 코드

        <li className='rounded-lg shadow-md overflow-hidden cursor-pointer'>
           <img className='w-full' src={image} alt={title} />
           <div className='mt-2 px-2 text-lg flex justify-between items-center'>
            <h3 className='truncate'>{title}</h3>
            <p>{`₩${price}`}</p>
           </div>
           <p className='mb-2 px-2 text-gray-600'>{category}</p>
        </li>

        <section className='h-96 bg-yellow-900 relative'>
            <div className='w-full h-full bg-cover bg-banner opacity-80'></div>
            <div className='absolute w-full top-32 text-center text-gray-50 drop-shadow-2xl'>
                <h2 className='text-6xl'>Shop with US</h2>
                <p className='text-2xl'>Best Products, High Quality</p>
            </div>
        </section>

<p className='mx-12 mt-4 text-gray-700'>{category}</p>
            
            <section className='flex flex-col md:flex-row p-4'>
                <img 
                className='w-full px-4 basis-7/12'
                src={image} alt={title} />

                <div className='w-full basis-5/12 flex flex-col p-4'>
                    <h2 className='text-3xl font-bold py-2'>{title}</h2>
                    <h3 className='text-2xl font-bold py-2 border-b border-gray-400'>₩{price}</h3>
                    <p className='py-4 text-lg'>{description}</p>

                    <div className='flex items-center'>
                        <label 
                        className='text-brand font-bold'
                        htmlFor='select'>옵션:</label>

                        <select 
                        className='p-2 m-4 flex-1 border-2 border-dashed border-brand outline-none'
                        id='select'
                        value={selected}
                        onChange={handleSelect}
                        >
                        {options && options.map((option, index) => <option key={index}>{option}</option>)}
                        </select>
                    </div>

                    <Button 
                    onClick={handleClick}
                    text={'장바구니 추가'} />
                </div>
            </section>

• 공식 사이트

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.