tailwind CSS

PostCSS

'모듈화된 CSS' 라는 기치를 내걸으며 PostCSS라는 이름의 새로운 스타일 언어와 이를 동작하게하는 프로그램 탄생.

다양한 플로그인을 자유롭게 장착할 수 있도록 하여, CSS 표준에 추가되를 요청하는 많은 기능을 표준화 이전에 실험해 볼 수 있게 하였다.

tailwind CSS?

2017년 11월에 유틸리티 최우선을 기치로 만든 CSS 프레임워크다. 부트스트랩과 유사한 형태로 지원한다

장점

• Class Naming 불필요
• Javascript 분리
• 커스터마이징

먼저 utility class를 사용하기 때문에 class 명을 고민하지 않아도 된다. 그리고 BootStrap의 경우 javascript를 사용해서 스타일 하는 경우가 많은데, Tailwind는 css로만 구현한다.

단점

• 러닝커브
• html (jsx) 코드 길이
  Class 안에 바로바로 적용을 해주기 때문에 하나의 코드가 길어지는건 어쩔 수 없다.

설치

환경은 Mac OS, React, 터미널로 설치하였습니다.

1. 터미널 오픈 후

   npm i -D postcss autoprefixer tailwindcss

• autoprefixer : 대표적인 PostCSS 플러그인 밴더 접두사 문제를 해결해주는 역할
• postcss : autoprefixer 를 사용하려면 postcss 플러그인이 필요하다.
• tailwindcss : tailwindcss

2. 구성 파일 init

   npx tailwindcss init -p

3. 설치 확인
   

정상적으로 설치가 되었다면 위와같이 postcss.config.js , tailwind.config.js 파일 생성을 확인 할 수 있다.

4. tailwind.config.js 수정

   module.exports = {
   	content: [],
   		theme:{
   			extend:{},
   		},
   	plugins: [],
   }

위와같이 파일이 생성된걸 확인할 수 있다. 이 파일을

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

content에 위와같은 경로와 파일 확장자를 입력해준다. 혹시 이 외에 사용하고 싶은 플러그인이 있다면, plugins의 [] 안에 아래와같이 입력해준다. ',' 를 통해 여러개를 입력 가능하다

require('pluginName1'), require('pluginName2') ...

5. 반영하기

src/index.css

@tailwind base;
@tailwind components;
@tailwind utilites;

입력 후에 사용하면 된다.