[tailwind CSS] backgroundImage 설정 방법 - (config/style/custom)

tailwind CSS - backgroundImage 설정 방법 - (config/style/custom)

tailwind css로 backgroundImage를 설정하는 방법은 기록하고자 한다. tailwind 왕왕초보의 무작정 적용기!

 

목차

0. 이미지 파일 부터 넣기 - assets 폴더를 pulbic에 넣을 것인가? src에 넣을 것인가?

1. backgroundImage를 tailwind.config.js 파일에서 설정해보기

2. style 속성에 backgroundImage를 설정해보기

3. 일회성 속성일 경우, 임의 값을 설정하여 backgroundImage를 설정해보기

 

0. 이미지 파일 부터 넣기 - assets 폴더를 pulbic에 넣을 것인가? src에 넣을 것인가?

public 폴더

public 폴더에 있는 파일들은 절대 경로를 통해 접근한다.

예를 들어, 'public/assets/images/sky.jpg' 파일은 '/assets/images/sky.jpg'로 접근 가능하다. 

1. HTML 파일에서 절대경로로 링크되거나
<img src="/assets/images/sky.jpg" alt="Sky Image">

2. JS 파일에서 이미지를 불러올 때 사용된다.
const imageUrl = '/assets/images/sky.jpg';

 

src 폴더

src 폴더는 상대 경로와 절대 경로 모두 사용 가능하다.

중요한 점은 src 폴더에 있는 CSS 파일은 public 폴더에 있는 파일에 직접 접근이 불가능하다. 

왜냐? css 파일에서 절대 경로(*public에 있는 image 파일에 대한 경로)를 설정하면 자신이 속한 src 폴더를 기준으로 경로를 찾기 때문에

src 폴더 내에서는 해당 파일을 찾을 수 없다는 에러는 내뱉는다. 

 

* 절대경로 설정 시 루트 폴더 기준

- jsx, tsx 파일에서 절대 경로는 public 폴더를 기준으로 

- css 파일에서 절대 경로는 src 폴더를 기준으로

 

하지만, tailwind css의 특징은 무엇인가? 

CSS 파일은 필요치 않으며, 유틸리티 기반의 CSS 프레임워크이기에 스타일에 맞는 클래스를 찾아서 HTML에 적용만 시켜주면 된다.

그렇기에 assets 파일들을 src 폴더에 위치시킨 것과 public 폴더에 위치 시킨 것 모두 올바르게 작동함을 확인하였다.

tailwind css는 css 파일을 필요치 않은 유틸리티 기반의 css 프레임워크이다. 이미지 파일이 public 폴더에 있든 src 폴더에 있든, 각각의 접근 방법을 올바르게 사용하면 이미지가 정상적으로 표시된다. (아래 backgroundImage를 설정하는 부분은 src 폴더에 assets을 넣도록 설정하였다.)

 

1. backgroundImage를 tailwind.config.js 파일에서 설정해보기

핵심: "tailwindcss.config.js 파일에서 theme 객체 내의 extend에 backgroundImage를 설정할 수 있다."

 

tailwind config에 무지하기 짝이 없는 초보 .. 일단 backgroundImage를 넣고 보자였던 코드이다. theme > extend > backgroundImage로 설정해야한다.!

 

일단 tailwind에 대해 아무 것도 몰랐던 필자는 tailwind config에서 프로젝트 기본 theme를 커스터마이징 할 수 있는지 알게 되었다.!

 

(공식문서에 따르면) tailwind.config.js 파일의 theme 섹션에서는 프로젝트의 색상 팔레트, 글꼴 등을 정의할 수 있다.

기본값이 screens, colors, borderRadius 등이 있으며, extend 객체를 추가적으로 사용하여 기본 설정을 유지하면서 새로운 설정을 추가할 수 있다.

 

theme 객체 내의 extend 섹션을 사용하지 않고 backgroundImage를 직접 정의하면 기본 tailwindCSS 설정을 덮어쓰게 된다. 기본 backgroundImage 설정이 필요 없고, 완전히 커스텀 설정만 사용할 것이라면 extend 객체가 아닌 theme에 직접 정의해도 무방하고 한다. 하지만, 프로젝트에서 backgroundImage 기본 설정이 수정될 수도 있기 때문에 extend 객체에 추가하는 방법을 택했다.

공식문서에서도 them > extend > backgroundImage로 설정되어있다.

방법 1. tailwind.config.js에 설정해놓은 값을 세팅한다. 

App.tsx
<div className="bg-light h-screen w-screen"></div>

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            backgroundImage: {
                light: 'url("./assets/desktop/desktopLight.png")',
                dark: 'url("./assets/desktop/desktopDark.png")',
            },
        },
    },
    plugins: [],
};

 

2. style 속성에 backgroundImage를 설정해보기

아래 코드의 src 디렉토리는 다음과 같다.

 

정적 파일을 src 폴더에 두는 경우는 빌드 도구(webpack, vite 등)가 처리하도록 import 하여 사용한다.

방법 2. background로 설정할 파일을 import한다.
import desktopLight from './assets/desktop/desktopLight.png';

<div
    className="h-screen w-screen"
    style={{
        backgroundImage: `url(${desktopLight})`,
    }}
></div>

방법 3. background 설정을 여러군데에서 사용한다면 import 해둔 파일을 만든다. 

config/background.ts
interface IDesktopBackground {
    light: string;
    dark: string;
}

import lightBackground from '../assets/desktop/desktopLight.png';
import darkBackground from '../assets/desktop/desktopDark.png';

export const desktopBackground: IDesktopBackground = {
    light: lightBackground,
    dark: darkBackground,
};

App.tsx
return (
    <div
        className="h-screen w-screen"
        style={{
            backgroundImage: `url(${desktopBackground.light})`,
        }}
    ></div>
);

 

3. 일회성 속성일 경우, 임의 값을 설정하여 backgroundImage를 설정해보기

테마에 포함하기에는 적절하지 않은 일회성 배경 이미지 값을 사용해야 하는 경우 대괄호를 사용하여 임의의 값을 사용하여 즉석에서 속성을 생성할 수 있다.

방법 4. 여러군데에서 사용하지 않고 설정을 원한다면 상대경로를 넣어 세팅한다.
<div
    className="bg-[url('./assets/desktop/desktopLight.png')] h-screen w-screen"
></div>

 

1. 2. 3. 중 택하여 backgroundImage를 설정하면 다음과 같이 잘 나오는 것을 확인할 수 있다.

 

결론

1. tailwind css = css 파일을 필요치 않은 유틸리티 기반의 css 프레임워크. 이미지 파일이 public 폴더에 있든 src 폴더에 있든 접근 방법만 맞으면 작동.

2. tailwindcss.config.js의 기본 설정을 유지하면서 새로운 설정을 추가하고 싶다면 extend 객체에 설정을 추가하자.

3. style 속성에 backgroundImage를 설정하다면, 1) 해당 파일을 import 하던가 2) 파일을 import 한 설정된 상수를 사용하자.

4. 일회성 사용일 경우, bg-[url(상대경로)]를 사용해보자.

 

참고

tailwindcss background image: https://tailwindcss.com/docs/background-image

tailwindcss theme configuration: https://tailwindcss.com/docs/theme