tailwind 설치~빌드 까지

심심풀이로 퍼블리싱을 할 때

tailwind 를 사용해 보고 싶어서 알아봄

 

https://tailwindcss.com/docs/installation

Installation: Tailwind CLI - Tailwind CSS

 

 

1. npm install tailwindcss

=> npm 을 이용하여 tailwindcss를 설치한다.

 

2. npm tailwindcss init

 => npx를 이용하여 custom을 위한 tailwind.config.js를 생선한다.

 

3. tailwind는 한번 bulid 하여 라이브러리 css를 생성했다고 해서 모든 소스가 있는 것이 아니다.

   참조할 html파일을 tailwind.config.js에서 설정한 후,

   그 파일에서 사용하는 tailwind class들을 읽은 후,

   build하여 만들어진 tailwind 라이브러리 css 파일에 추가설정된다.

 => tailwind.config.js 의 content부분 설정하기

module.exports = {
  content: ["./*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

4. tailwind css 파일 생성을 위한 빌드 전, 어떤 라이브러리를 사용할 것인지 명시하는 css를 작성

 => 나는 index.css를 만들어 아래와 같이 작성하였다.

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

 

5. tailwind css 파일 생성을 위한 빌드명령어를 설정(필수과정 아님)

 => tailwindcss의 빌드 명령어는 아래와 같다.

tailwindcss -i [3의 index.css와 같이 어느 라이브러리를 쓸 것인지 명시한 파일위치] -o [생성할 위치]

 

살짝 길 수 있어 아래와 같이 설정하여 짧은 명령어로 실행할 수 있다.

package.json의 script 부분에서 설정한다

{
  "dependencies": {
    "tailwindcss": "^3.0.23"
  },
  "scripts": {
    "buildcss": "tailwindcss -i ./css/index.css -o ./css/tailwind2.css"
  }
}

나는 buildcss란 명령어에 tailwindcss를 만들어주는 명령어를 설정했다.

이제 buildcss라고 터미널에 입력하게 되면

css폴더의 index.css에 명시되어있는 tailwind 라이브러리를 사용할 수 있게

css폴더에 tailwind2.css 파일이 만들어 질 것이다.

 

html파일에서 class를 추가하거나 삭제할 때마다 해당 class들을 읽어 css파일을 빌드해야하다보니,

이렇게 짧게 명령어를 바꾸는게 좋아보인다.

---

 

이제 빌드되어진 tailwind css파일을 보면 

1. 빌드에 사용했던 index.css 파일에 명시된 라이브러리 값이 있고,

2. tailwind.config.js 의 content 부분에 설정한 html파일, 해당파일에서 사용한 tailwind class들을 읽은 후 tailwind css에도 추가한다.

 

html을 보면 아래와 같은 tailwind class들을 사용했고

<span class="text-4xl font-bold text-center text-blue-500">dasadsadassdsa</span>

tailwind css파일을 보면

.text-center {
  text-align: center;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.font-bold {
  font-weight: 700;
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

위와 같이 사용한 class들만 설정되어 있다.