패스트캠퍼스 챌린지 9일차 (Tailwind CSS)

2021.2.1 (화) +9days

Tailwind CSS

Tailwind CSS는 Utility-FIrst 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.

An API for your design system

Utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system.

Build whatever you want, seriously.

Because Tailwind is so low-level, it never encourages you to design the same site twice. Even with the same color palette and sizing scale, it's easy to build the same component with a completely different look in the next project.

It's tiny — never ship unused CSS again.

Installation

1. Create your project

npx create-react-app my-project
cd my-project

2. Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. Configure your template paths

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Add the Tailwind directives to your CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Start your build process

npm run start

6. Start using Tailwind in your project

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

craco

npm install @craco/craco

Create React App Configuration Override 는 CRA를 쉽게 설정하기 위해 만들어진 라이브러리?

CRA에서 eject를 하지 않아도 root 폴더에 craco.config.js를 추가해서 eslint, babel, postcss 등을 쉽게 설정 가능

root에 craco.config.js 파일 생성.

module.exports = {
  style: {
    postcss: {
      plugin: [require("tailwindcss"), require("autoprefixer")],
    },
  },
};

VS Code Extension

Tailwind CSS IntelliaSense는 VSCode에서 Tailwind 속성값들의 코드힌트를 제공

Background Color

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

Background Color - Tailwind CSS

사용 방식은 기존의 라이브러리들과는 상이한 방법이다.

className에 class를 추가해서 스타일을 적용한다. Tailwind는 이 클래스를 활용하는 방식이 핵심.

 

import React from "react";

export default function Button() {
  return (
    <div>
      <button className="py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-red-700">
        Save changes
      </button>
      <button className="py-2 px-4 bg-indigo-500 text-white">
        Save changes
      </button>
      <button className="py-2 px-4 bg-indigo-500 text-white">
        Save changes
      </button>
      <button className="py-2 px-4 bg-indigo-500 text-white">
        Save changes
      </button>
      <button className="py-2 px-4 bg-indigo-500 text-white">
        Save changes
      </button>
      <button className="py-2 px-4 bg-indigo-500 text-white">
        Save changes
      </button>
    </div>
  );
}

 

With Tailwind, you style elements by applying pre-existing classes directly in your HTML.

 

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

 

Tailwind CSS

컴포넌트 ⇒ 자체를 제공하진 않음(유료)

class ⇒ 스타일 요소를 모두 줌

Tiny ⇒ 빌드할때는 사용하는 class만 빌드함

IntelliSense ⇒ VScode extension 제공

Utility First ⇒ 클래스 이름 생성 X / CSS 추가 X

다크모드 ⇒ 대응 용이 (media / class)

Customize ⇒ configuration 차원에서

대부분의 css ⇒ 커버함 (but 예제가 아쉽다..)

 

 

 

 

21.2.1 (화) +9days

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다