[TailWind] React에 테일윈드 설치하기

 

#1 설치하기

기본적으로 CRA가 무조건 우선순위! create-react-app '내가 설정할 app 명을 터미널에 설치한 후에 아래 설치 명령어를 입력하자.

//yarn
yarn add - tailwindcss postCss autoprefixer 

//npm
npm -tailwindcss postcss autoprefixer

 

 

여기서 postCSS 와 autoprefixer는 뭔데 왜 설치하는가 싶었는데 이유는 아래와 같았다.

 

'PostCSS' 는 Css를 변환해 주는 도구로 브라우저 호환성을 개선해주며, tailWind는 postCss 플러그인으로 구현되어 있으며,

 

'autiprefixer' 는 구형 브라우저에서 지원하지 않는 Css 문법을 반영이 가능하도록 --webkit-- 등을 자동으로 추가해 준다. JavaSciprt로 따지면 Babel 같은 아이다. 

 

같이 설치해주자 .

 

 

 

#2 설정 해주기

npx tailwindcss init -p

위 명령어를 실행해서 테일윈드 설정 파일 생성해주자

그럼 postcss.config.js 파일과 tailwind.config.js 파일이 생성이 된다.

 

생성된 tailwind.config.js파일에서 아래와 같이 설정해주자

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

 

 

content 는 테일윈드 2.0 이상 버전에서 사용되는 설정 형식이다. 이전에는 purge옵션을 사용했었다. 

content는 어떤 파일을 스캔하여 클래스를 설정해야 하는지 알려주는 역할을 하는 옵션이다. 

 

src/ 폴더 하위의 **/ 그 하위의 * 폴더 말 그대로 src 하위 폴더 전체로 설정해주자 그래야 매번 설정안하고 최상단에서 한번 설정함에 따라 하위에서 어디서든 사용이 가능하니까

 

 

"테일윈드 index.css 에 적용"

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

React의 최상단인 index.js에서 import 되고있는 index.css에서 설정 해주자 

그 이후 하위 content가 감지하는 컴포넌트에서는 어디서든 사용 가능하다. 

 

 

 

#3 React에서 테일윈드 사용해보기

https://flowbite.com/docs/components/buttons/

Tailwind CSS Buttons - Flowbite

 

공식홈에서 버튼을 가져와서 컴포넌트에 적용해보자.

이 중 버튼 좀 이뻐보이는걸 골라서 적용해봤다.

 

 

테일윈드를 쓰려면 가독성은 포기해야하는 거 같다.

css를 직접 짜지않는 편함을 얻고 가독성을 잃은 셈 치자.

 

그냥 저렇게 복사 해두고 저장만 하고 빌드만 하면

 

꽤 분위기 있는 그라데이션 느낌의 버튼이 만들어졌다. 

이제 여기에 props을 이용해서 css in js로 동적으로 className를 컨트롤 해주면 더 인터렉티브 한 버튼으로 바꿀 수 있다.

 

 

 

 

#5 테일윈드를 더욱 편하게해주는 Tailwind intellicens

Ctrl + Shift + p 해서 'Open User Settings' JSON 으로 들어가자 

 

"editor.quickSuggestions": {
   "strings": true
},
"css.validate": false,
"editor.inlineSuggest.enabled": true

이후 위 코드를 복사해서 붙여넣게되면

테일윈드가 정의해둔 클래스가 자동완성이 되니 얼마나 편한가 이제 남은건 클래스에 익숙해지는 것 만 남았다.