Tailwind CSS setting

tailwindCSS를 세팅하기 전에 tailwindCSS가 무엇인지 알고 싶다면

아래의 문서를 확인해주세요

TailwindCSS란?

 

 

1. tailwindCSS 설치

tailwind를 설치하기 위해 아래의 라이브러리들을 설치합니다.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

참고로 Autoprefixer를 설치를 하면 css 속성의 vendor-prefix를 접속하는 브라우저에 따라 자동으로 붙여줍니다.

 

Tailwind CSS를 사용하게 위해서는 Node.js 버전이 12.13 이상이여야 합니다.

cmd 창이나 터미널 창에 node 버전을 확인해 봅니다.

 

 

 

2. tailwindCSS inteillisense를 추가해주자.(자동완성 기능)

tailwindCSS inteillisense를 설치해주면 코드 작성 시 tailwindCSS에 등록된 클래스명을 자동완성할 수 있습니다.

 

 

3. tailwindCSS 빌드

tailwindCSS를 일반CSS로 빌드하기 위해서 postcss.config.js 파일을 만들어야합니다.

아래와 같이 파일 생성합니다.

 

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

 

postcss.config.js 파일 생성 후 npx tailwindcss init 코드를 작성하면 tailwind.config.js 파일이 자동 생성 됩니다.

npx tailwindcss init

 

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  variants: {
    extend: {},
  },
  plugins: [],
}

tailwind.config.js를 사용하면 tailwindCSS를 확장할 수 있습니다.

 

 

4. tailwindCSS 클래스 생성

 

tailwind.css 파일 생성 후 아래와 같이 작성하여 줍니다.

tailwind.css 

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

 

postCSS가 위 파일의 코드를 보고 tailwind가 갖고 있는 모든 클래스 이름으로 바꿀 것입니다.

또한 tailwind config 파일을 들여다 보고 새 클래스 이름이 있다면 새 클래스도 추가할 것입니다.

 

예를 들어서 btn 클래스를 만들고 싶다면 @tailwind compoenents와 @tailwind utilities 사이에 코드를 추가합니다.

/* ./src/tailwind.css */
@tailwind base;
@tailwind components;

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}

@tailwind utilities;

그런 다음 아래와 같이 빌드를 해 주어야합니다.

npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

그런 다음 코드를 실행하면 됩니다. 혹은 packge.json에서 

아래와 같이 코드를 작성하여 실행시킬 수 있습니다.

  "scripts": {
    "tailwind:build": "tailwind build ./src/styles/tailwind.css -o ./src/styles/styles.css",
    "start": "npm run tailwind:build & react-scripts start",
    }

파일 용량이 꽤나 크지만 나중에 프로젝트가 끝나면 쓰지 않는 부분들을 없애서

용량을 줄일 수 있습니다.

 

5. 마무리

이렇게 설정하면 tailwindCSS를 사용하여 쉽고 직관적으로 CSS를 사용하실 수 있습니다.

 

참조

• tailwindcss.com/