[ Tailwind.css ] 이미지를 배경 '클래스' 로 등록하는 방법, customizing background Image

Tailwindcss 를 사용하던 와중 커스터마이징을 할 수 있다는 것을 알았다.

 

클릭시, 해당 링크로 새창 이동

Vue.js 3 - tailwindcss3 를 사용하였습니다.

 

하는 방법 바로 가시죠.

우선 tailwind.config.js 파일이 /src 내에 있습니다.

이곳에다가 작성하는것인데요,

 

theme.extend. 내에 작성

module.exports = {
  purge: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        'hero-pattern': "url('pattern-bg.png')",
        'second-image-pattern': "url('sencond-bg.png')",
      })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

이렇게 작성하면 해당 내용을 전역으로 사용할 수 있게된다.

 

사용 사례

이상입니다.

 

유용하게 쓰십쇼