최근 tailwind를 자주 사용하면서 추가적으로 도움이 되는 것들을 정리했다,

tailwind를 사용하면 Nesting과 스타일시트파일 한 곳에서 관리. custom 선택자를 적용할 수 있는지 알아보았다.

Nesting

postcss.config.js 파일에 'tailwindcss/nesting' : {}, 를 추가하면 SCSS 기능 중 하나인 중첩을 사용할 수있다.

// postcss.config.js
module.exports = {
  plugins: {
    'tailwindcss/nesting': {}, // add this line
    tailwindcss: {},
    autoprefixer: {},
  }
}

스타일시트를 여러 파일로 분할하여 메인 파일에 가져오기

npm install -D postcss-import

// postcss.config.js 
모듈 . exports = { 
  plugins : { 
    'postcss-import' : {}, // 이 줄을 추가합니다. 
    'tailwindcss/nesting' : {}, 
    tailwindcss : {}, 
    autoprefixer : {}, 
  } 
}

// globals.css
@import  "tailwindcss/base" ; 
@import  "tailwindcss/components" ; 
@import  "tailwindcss/utilities" ; 

/* 여기에 사용자 정의 파일 */ 
@import  "custom.css"

custom 선택자

tailwind.config.js 에서 plugins을 활용하면 커스텀 선택자를 추가 할 수 있어 tailwind 선택자와 같이 동일하게 사용할 수있다.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin')

module.exports = {
  //..
  plugins: [
    plugin(function ({ addUtilities }) {
      const newCssUtilities = {
        '.absolute_xHalf': {
          position: 'absolute',
          left: '50%',
          transform: 'translateX(-50%)',
        },
        '.absolute_yHalf': {
          position: 'absolute',
          top: '50%',
          transform: 'translateY(-50%)',
        },
        '.absolute_center': {
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
        },
        '.absolute_fullPage': {
          position: 'absolute',
          top: '0',
          left: '0',
          right: '0',
          bottom: '0',
          width: '100%',
          height: '100%',
        },
        '.flex_vertical_center': {
          display: 'flex',
          alignItems: 'center',
        },
        '.flex_horizontal_center': {
          display: 'flex',
          justifyContent: 'center',
        },
        '.flex_center': {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        },
        '.flex_xBetween': {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
        },
        '.max_w_1600': {
          maxWidth: '1600px',
        },
      }
      addUtilities(newCssUtilities, ['responsive', 'hover'])
    }),
  ],

}

참고

https://medium.com/@muzammilsyed270300/tailwind-css-vs-scss-a-comparison-of-utility-first-and-preprocessor-approaches-1d0be4cc0bbd