Tailwind CSS

---

1.설치

• 일반 npm 설치 참조

  Tailwind CSS installation

RCA (react-create-app) 에서 설치

1.Create react app 설치

2.Install Tailwind via yarn

$ yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

3.Install and configure CARCO

$ yarn add @craco/craco

<!-- in package.json -->
<!-- 스크립트 부분 바꿔주기 -->
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
  },

Create craco.config.js in root 경로 에다가 tailwindcss and autoprefixer as PostCSS plugins 등록하기

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
};

4. Create tailwindcss configuration 파일 만들기

tailwind.config.js root 경로에 만들기

$ npx tailwindcss-cli@latest init

// in tailwind.config.js
// react 에 맞는 초기값 설정

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

5.Tailwind in project css

/* in src/index.css */
/* tailwind component 넣기 */
@tailwind base;
@tailwind components;
@tailwind utilities;

2.Background Color

https://tailwindcss.com/docs/background-color

3.@apply

• index.css 에서 자주 쓰이는 css (예 btn ) 등을 preset 에 저장한 다음에 재사용할 수 있음

.btn {
  @apply font-bold py-2 px-4 rounded;
}

.btn-blue {
  @apply bg-blue-500 text-white;
}

.btn-blue:hover {
  @apply bg-blue-400;
}

// button 제작
<button className="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded">Find Friends</button>

// apply 사용해서 똑같은 버튼 만들기
<button className="btn btn-blue">Find Group</button>

4.Spacing (padding, margin, space between)

padding : https://tailwindcss.com/docs/padding

숫자단위의 4 가 1rem 기준임

• pt-4 : padding-top : 1rem

margin : https://tailwindcss.com/docs/margin

space between : https://tailwindcss.com/docs/space

5.Sizing (Width, Height)

Width: https://tailwindcss.com/docs/width

<div class="flex ...">
  <div class="w-1/2 ... ">w-1/2</div>
  <div class="w-1/2 ... ">w-1/2</div>
</div>
<div class="flex ...">
  <div class="w-2/5 ...">w-2/5</div>
  <div class="w-3/5 ...">w-3/5</div>
</div>
<div class="flex ...">
  <div class="w-1/3 ...">w-1/3</div>
  <div class="w-2/3 ...">w-2/3</div>
</div>
<div class="flex ...">
  <div class="w-1/4 ...">w-1/4</div>
  <div class="w-3/4 ...">w-3/4</div>
</div>
<div class="flex ...">
  <div class="w-1/5 ...">w-1/5</div>
  <div class="w-4/5 ...">w-4/5</div>
</div>
<div class="flex ...">
  <div class="w-1/6 ...">w-1/6</div>
  <div class="w-5/6 ...">w-5/6</div>
</div>
<div class="w-full ...">w-full</div>

Height : https://tailwindcss.com/docs/height

6.Flexbox

Flex Direction : https://tailwindcss.com/docs/flex-direction

Flex Wrap : https://tailwindcss.com/docs/flex-wrap

🔶 🔷 📌 🔑

Reference

• Tailwind CSS official site - https://tailwindcss.com/