[css] TailWindCss 사용

리액트 강의를 듣다가 TailWindCss를 사용해서 css사용하는 방법에 대해서 설명을 들었는데 내용이 인상적이였다.

그래 앞으로 개인적인 프로젝트에 해사 프레임웍을 사요해서 적용을 해보기로 했다.

공식사이트에 설명이 아주 친절하게 잘되었 있다.

 

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

설치

npm install -D tailwindcss
npx tailwindcss init

설정

새로 생긴 tailwind.config.js 에 내용을 아래와 같이 변경해준다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

App.css(임의의 설정 css파일) 파일에 아래 내용 추가

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

output.css에 변환내용 적용

npx tailwindcss -i ./src/App.css -o ./src/output.css --watch

적용 되었는지 확인

변환된 css파일 import 해준다.

import './output.css';

helloword 파일 출력. 텍스트 밑에 언더라인이 생성된다면 정상적으로 적용이 된것이다.

<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>

VSCODE 플러그인 설치

개발 편의를 위해서 플러그인을 설치해주면 힌트를 참고해서 개발을 편하게 진행 할수 있다.