상현
개발 덕후

Laravel Mix & tailwind v^2.1 JIT 모드

( 업데이트: )

By

내가 사용하는 환경은 app.scss를 통해서 하위 모든 *.scss를 임포트해서 사용하는 방식이라서

@import 'tailwindcss/base';

@import 'functions/*';
@import 'common/root';

@import 'common/global';

@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

// components
@import 'components/modules/*';
@import 'components/list';
@import 'components/alert/*';

// layout
@import 'layouts/*';

// page
@import 'pages/home';
@import 'pages/resume';Code language: JavaScript (javascript)

위처럼 구성해도 tailwind의 css가 제대로 등록되지 않는 것이다.

.code {
  @apply bg-customColor-point;
}

위처럼 커스텀 컬러를 등록했다했을때 해당 class가 tailwind에서 재대로 등록되지 않았기 때문에 scss 컴파일에서도 오류가 난다.

무엇이 문제일까?

🔑 해결

분명히 기존 webpack.mix.js로는 그대로 일것이다. tailwind 문서에보면 tailwindcss v^2.1 이상부터는 tailwindcss jit 모드가 병합되어서 tailwind.config.js에서 모드만 추가하면 된다고 나와있었기 때문이다.

하지만 roots/sage 10에서는 따로 tailwindcss/jit 모듈을 적용시켜줘야지 원하는대로 적용이 된다.

mix
  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles')
  .sass('resources/styles/replybox.scss', 'styles')
  .options({
    processCssUrls: false,
    postCss: [require('@tailwindcss/jit')],
    autoprefixer: {
      options: {
        browsers: ['last 6 versions'],
      },
    },
  });
...Code language: JavaScript (javascript)

😈 그런데 또 문제가 생겼어

tailwindcss 문서에도 나와있었지만 variants가 이전에는 @import 'tailwindcss/utilities'스타일에 모두 들어가는 엔진이었다. 그런데 그것을 지정하지 않아서 disabled: focus:클래스 스타일이 적용되지 않는 것이다.

🐛 BUG

  • variants 적용 안됨
  • TypeError: Cannot read properties of undefined (reading ‘theme’)
@import 'tailwindcss/utilities';
@tailwind variants;Code language: CSS (css)

위처럼 variants를 css로 작성해서 넣으면 된다.

그리고 이전에 내가 해결이라고 생각했던 부분은 잘못됐던 것이었다.

mix
  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles')
  .sass('resources/styles/replybox.scss', 'styles')
  .options({
    processCssUrls: false,
    postCss: [require('tailwindcss')],
    autoprefixer: {
      options: {
        browsers: ['last 6 versions'],
      },
    },
  });Code language: JavaScript (javascript)

참고