FrontEnd/React
TailwindCSS
hanseom
2023. 11. 16. 21:00
반응형
TailwindCss란 HTML 안에서 CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크 입니다.
TailwindCSS 장점
- 부트스트랩과 비슷하게 m-1, flex와 같이 미리 셋팅된 Utility Class를 활용하는 방식으로 HTML에서 스타일링을 할 수 있습니다.
- 빠른 스타일링 작업이 가능합니다.
- class 혹은 id 명을 작성하기 위한 고생을 하지 않아도 됩니다.
- IntelliSense 플러그인이 제공되어 금방 익숙해질 수 있습니다.
Tailwind CSS 살펴보기
Todo App에 Tailwind CSS 적용
Install Tailwind CSS with Create React App - Tailwind CSS
Setting up Tailwind CSS in a Create React App project.
tailwindcss.com
Install Tailwind CSS
> npm install -D tailwindcss
> npx tailwindcss init
Configure template paths (tailwind.config.js file)
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
App.css
@tailwind base;
@tailwind components;
@tailwind utilities;
App.js
return (
<div className="flex items-center justify-center w-screen h-screen bg-blue-100">
<div className="w-full p-6 m-4 bg-white rounded shadow md:w-3/4 md:max-w-lg lg:w-3/4 lg:max-w-lg">
<div class="flex justify-between mb-3">
<h1>할 일 목록</h1>
</div>
{/* List Component */}
<Lists todoData={todoData} setTodoData={setTodoData} />
{/* Form Component */}
<Form handleSubmit={handleSubmit} value={value} setValue={setValue} />
</div>
</div>
);
Form.js
return (
<form style={{ display: "flex" }} onSubmit={handleSubmit}>
<input
type="text"
name="value"
className="w-full px-3 py-2 mr-4 text-gray-500 border rounded shadow"
placeholder="해야 할 일을 입력하세요."
value={value}
onChange={handleChange}
/>
<input
type="submit"
value="입력"
className="p-2 text-blue-400 border-2 border-blue-400 rounded hover:text-white hover:bg-blue-200"
/>
</form>
);
Lists.js
return (
<div>
{todoData.map((data) => (
<div key={data.id}>
<div
className={
"flex items-center justify-between w-full px-4 py-1 my-2 text-gray-600 bg-gray-100 border rounded"
}
>
<div className="items-center">
<input
type="checkbox"
onChange={() => handleCompleChange(data.id)}
defaultChecked={false}
/>{" "}
<span className={data.completed ? "line-through" : undefined}>
{data.title}
</span>
</div>
<div className="items-center">
<button onClick={() => handleClick(data.id)}>x</button>
</div>
</div>
</div>
))}
</div>
);
[참고 정보]
반응형