[tailwind CSS] 3. 커스텀 선택자(클래스) 추가 방법, Adding variants

tailwind.config.js

1. plugin을 불러와 선택자와 클래스명을 지정하고, tailwind CSS를 재생성한다.

1.1. 삽입 위치

const plugin = require('tailwindcss/plugin') // ★★ 

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
  	 // ★★ 
  },
  plugins: [
  	 // ★★ 
  ],
}

1.2. 기본형

const plugin = require('tailwindcss/plugin') // ★★ 

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      사용할-속성: ['클래스명1'] // ★★ 지정한 속성에서만 사용 가능
    }
  }
  plugins: [
    plugin(function({ addVariant, e }) { // ★★ 
      addVariant('클래스명1', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`제어할-태그의-클래스명1${separator}${className}`)}`
        })
      })
    })
  ]
}

+ 두 개 이상 선언할 때:

const plugin = require('tailwindcss/plugin') // ★★ 

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      display: ['클래스명1', '클래스명2'], // ★★ 지정한 속성에서만 사용 가능
      backgroundColor : ['클래스명1'] // ★★ 지정한 속성에서만 사용 가능
    }
  }
  plugins: [
    plugin(function({ addVariant, e }) { // ★★ 
      addVariant('클래스명1', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`제어할-태그의-클래스명1${separator}${className}`)} ~ i`
        })
      }),
      addVariant('클래스명2', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`제어할-태그의-클래스명2${separator}${className}`)}:first-child`
        })
      })
    })
  ]
}

'사용할-속성'은 tailwind Docs > 추가하고 싶은 속성 page > Customizing > Variants 을 참고하자.

Documentation - Tailwind CSS

1.3. html에서 추가한 클래스 사용하는 방법: 클래스명:

<div>
  <div class="클래스명2:bg-red-500">first</div>
  <div class="클래스명2:bg-red-500">second</div><!-- first-child가 아니기 때문에 css 적용안됨 -->
  <div class="클래스명2:bg-red-500">third</div><!-- first-child가 아니기 때문에 css 적용안됨 -->
</div>

2. 예: input + span 선택 클래스 → input-span

const plugin = require('tailwindcss/plugin') // ★★ 

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      backgroundColor : ['input-span'] // ★★
    }
  }
  plugins: [
    plugin(function({ addVariant, e }) { // ★★
      addVariant('input-span', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`input${separator}${className}`)} + span`
        })
      })
    })
  ]
}

<div>
  <input class="input-span:bg-red-500" />
  <span>mint</span><!-- input + span 선택자였기에 이 요소만 붉은 bg를 가지게 됨 -->
  <span>mint</span> 
</div>

Plugins - Tailwind CSS