[React] css 적용 / 테일윈드 적용

리액트에서 css 사용하기

style = {{ }} 안에 내용을 삽입하면 되는데 key:value 형식으로 값을 넣는다. css와 달리 각 요소는 ;가 아니라 쉼표(,)로 구분하고, 값은 따옴표("")로 묶여야 한다.

const Square = () => {
	return (
		<div
			style={{
				width: "200px", // key : value
				height: "200px",
				backgroundColor: "blue",
				display: "flex",
				alignItems: "center",
				justifyContent: "center",
				color: "white",
				fontWeight: "bold"
			}}
		>
			정사각형
		</div>
	);
};

const Circle = () => {
	return <div
					 style={{
				width:"200px",
					height:"200px",
				backgroundColor:"red",
					display: "flex",
			alignItems: "center",
				justifyContent: "center",
				color: "white",
				fontWeight: "bold",
			borderRadius: "50%"
		}}
					 >원</div>;
};

const App = () => {
	return (
		<div>
			<Square />
			<Circle />
		</div>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));

 

 

테일윈드 사용하기

클래스 이름을 적용하면 테일윈드도 사용 가능하다. 

const Square = () => {
	return (
		<div className = "w-[200px] h-[200px] flex items-center justify-center bg-[yellow]"
			>
			정사각형
		</div>
	);
};