tailwind 사용기(작성중)

< 특징 >

🔆 기본적으로 reset css가 적용되어있다.

: @tailwind base 코드가 그 기능을 하는 것임.
: 여기에 box-sizing : border-box도 적용되어있음

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

< 사용자 지정 스타일 만드는 법 >

🔆 사용자 정의 클래스를 만들기

: 반복되는 css 패턴을 클래스로 만들어서 사용할 수 있음
: 사용자 지정 스타일 집합이 속하는 "버킷"을 테일윈드에게 알려주려면 @layer 지시어를 사용하해야 함.

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* @apply를 사용하여 기존 유틸리티 클래스를 사용자 지정 CSS에 인라인화합니다. */
  .flexCenter {
    @apply flex flex-col justify-center items-center;
  }
}

<!-- html -->
  <div className="flexCenter w-screen h-screen">
      <div >
      </<div>
  </<div>

🔆 자주쓰는 속성 theme으로 만들기

1. 자주쓰는 스타일을 만들어 논 후

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        "press-start": ["Edu NSW ACT Foundation", "cursive"],
      },
      colors: {
        //Primary
        primary: "#036DB7",
        //Text
        textPrimary: "#262E38",
        textSecondary: "#696969",
        textDisabled: "#9E9E9E",
        //Bg
        bgDefault: "#FAFAFA",
        bgPaper: "#FFFFFF",
      },
    },
  },
  plugins: [],
};

2. 원하는 테마를 가져다 쓴다.

     <h1 className="font-press-start text-primary">

🔆 직접 원하는 스타일 쓰기

테마에 포함시키는 것이 타당하지 않은 일회성 값을 사용해야 하는 경우, 대괄호를 사용하여 임의의 값을 사용하여 즉시 속성을 생성함

  <div className="w-[384px] h-[450px] rounded">

---

사용후기

장점

1. 클래스명을 고민하지 않아도 되서 좋다.
2. 별도의 css파일을 만들지 않아도 된다.

단점

1. 코드가 너무 길어지고, 가독성이 좋지 않다.(치명적..)