[CSS] - bootstrap과 tailwind 함께 사용하기

2022년 08월 25일

사건 발달

해커톤 프로젝트 진행을 위해 팀원들과 함께 템플릿을 구매하여 개발을 진행하고 있었다. 해당 템플릿은 bootstrap 기반이라 사용하다보니 width와 background-color 등의 문제로 결국 tailwind를 함께 사용해야겠다는 생각이 들어 진행했다.

프로젝트 상태

intelliJ IDEA 사용
SpringBoot + bootstrap 기반의 5인 개발 프로젝트

현재 아래와 같이 cdn 방식으로 bootstrap을 가져와 사용 중이다.

<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
</head>

적용 방법

적용 방법은 정말 친절하게도 tailwind 공식 문서에 잘 나와있다.

현재 프로젝트에서는 .gitignore 에 node_modules를 추가해놨기 때문에, 모든 팀원이 아래 방식을 같이 진행했다.

1. tawindcss 설치

우선 아래 순서대로 프로젝트 터미널에서 명령어를 입력해준다.

npm install -D tailwindcss
npx tailwindcss init

설치가 완료되면 프로젝트에 node_modules 폴더와 tailwind.config.js가 추가된 것을 볼 수 있을 것이다.

2. tailwind.config.js 수정

config 파일 내용을 아래와 같이 수정해준다.

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

3. base CSS 파일 수정

프로젝트에 가장 기본이 되는 CSS 파일이 하나씩은 존재할것이다.
만약 그런 CSS 파일이 없다면 아래와 같은 경로에 비어있는 style.css 파일을 생성해준다.

사실 어떤 CSS 파일이어도 상관 없지만, 애매하면 새로 만드는 것이 좋다.

./src/main/resources/static/style.css

다음으로 기존에 있던 CSS 파일에 아래와 같은 at-rules(어노테이션) 을 추가해준다.

@tailwind components;
@tailwind utilities;

아마 intelliJ 에서는 빨간색 줄이 뜰텐데 아무 문제 없으니 걱정말자!

4. build

위 과정을 그대로 새로 style.css를 추가했다면 아래와 같은 명령어를 입력해주면 되고, 그게 아니라면 본인이 해당 어노테이션을 추가한 파일의 이름과 경로를 맞게 입력해주면 된다.

npx tailwindcss -i ./src/main/resources/static/style.css -o ./src/main/resources/static/dist/output.css --watch

❌ 주의할 점 ❌
위 과정을 마치면 아래 와 같은 코드가 나올 것이다. 여기서 controll + c 로 나가지 않고 그대로 둔다.

Rebuilding...
Done in 191ms.

이와같이 진행하면 아래와 같이 dist 폴더 안에 output.css 가 생겼을 것이다.

5. 바꿔 넣기

마지막으로 layout 혹은 fragments 에 넣어놨던 코드를 output.css 로 바꿔준다.

<head>
    ...
    <!-- 기존에 사용하던 CSS -->
    <!-- <link rel="stylesheet" type="text/css" th:href="@{/style.css}">  -->

    <!-- 새로 output된 CSS -->
    <link href="/dist/output.css" rel="stylesheet">
</head>

만약 layout 혹은 fragments를 사용하지 않고 모든 페이지마다 head를 넣어줬다면 유감스럽게도 모든 html 파일에 적용해줘야한다.

6. 사용

아까 tailwind.config.js를 수정할 때 미리 눈치챘을 수 있겠지만, prefix: 'tw-'를 넣어준 이유는 이미 bootstrap이 프로젝트의 주된 라이브러리로 자리를 잡고 있기 때문에 tailwind의 class 명과 헷갈리지 않기 위해 넣어줬다.

<form class="input-group tw-bg-blue-500">
    <select class="form-select" name="sortCode">
        <option value="NEWEST" th:selected="${sortCode} == 'NEWEST'">최신순</option>
        <option value="OLDEST" th:selected="${sortCode} == 'OLDEST'">오래된순</option>
    </select>
</form>

위와 같이 tailwind의 클래스 문법 앞에 tw- 를 붙여서 사용해주고 저장(cmd + s)을 해주면 output.css 에 해당 구문에 대한 tailwind CSS 가 추가된다.

❌ 주의할 점 ❌
아까 build 과정에서 controll + c 로 빠져나갔으면 적용이 안 될수 있다.

Jwhy