TailwindCSS

  TailwindCss란 HTML 안에서 CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크 입니다.

 

TailwindCSS 장점

• 부트스트랩과 비슷하게 m-1, flex와 같이 미리 셋팅된 Utility Class를 활용하는 방식으로 HTML에서 스타일링을 할 수 있습니다.
• 빠른 스타일링 작업이 가능합니다.
• class 혹은 id 명을 작성하기 위한 고생을 하지 않아도 됩니다.
• IntelliSense 플러그인이 제공되어 금방 익숙해질 수 있습니다.

VSCode Extension

 

Tailwind CSS 살펴보기

 

Todo App에 Tailwind CSS 적용

• https://tailwindcss.com/docs/guides/create-react-app

Install Tailwind CSS with Create React App - Tailwind CSS

 

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>
  );

 

• 소스코드 변경부분

 

 

 

[참고 정보]

인프런- 따라하며 배우는 리액트 A-Z