Tailwind JIT 컴파일러가 놀라운 이유

나는 며칠 전 Livestream with .

이 Livestream 동안 우리는 JIT 컴파일러를 사용하게 되었고 저는 속도에 매우 놀랐지만 그보다 더 중요한 것은 사용자 정의 옵션입니다!

나는 그런 것을 기다리고 있었고 그것은 당신이 기대하는 것입니다.

오늘은 JIT 컴파일러를 활성화하는 방법과 이 사용자 정의 CSS를 활용하는 방법을 보여드리겠습니다.









아담 와단










🚀 2017년 첫 번째 릴리스 이후 Tailwind CSS로 이룬 가장 큰 발전을 공유하게 되어 기쁩니다!⚡️ 번개처럼 빠른 JIT 컴파일러🧁 변형을 다시 구성하지 마세요🤸 그 어느 때보다 적은 사용자 정의 CSS 작성 발표 보기 👉 youtube.com/watch?v=3O_3X7…


오후 16:58 - 2021년 3월 15일

Tailwind JIT 컴파일러 추가

이 문서에서는 간단한 HTML Tailwind 스타터 프로젝트를 사용하겠습니다.

할 수 있습니다find the project on GitHub.

첫 번째 단계는 JIT 컴파일러를 추가하는 것입니다. 다음 명령을 실행하여 그렇게 할 수 있습니다.

npm install -D @tailwindcss/jit tailwindcss postcss autoprefixer

다음으로 이 컴파일러가 사용되는지 확인해야 합니다.
프로젝트의 경우 postcss.config.js 파일을 열 수 있습니다.

파일을 다음과 같이 조정합니다.

module.exports = {
  plugins: {
    '@tailwindcss/jit': {},
    autoprefixer: {}
  }
};

그리고 그게 전부입니다!
이미 놀랍죠?

Tailwind JIT 컴파일러를 사용하여 사용자 지정 스타일 생성

나는 우리 모두가 맞춤형 스타일이 필요하다고 확신합니다.
고정 너비 요소, 사용자 정의 크기 테두리 또는 변환이 필요할 수 있습니다.

새로운 JIT 컴파일러를 사용하면 이 작업을 아주 쉽게 수행할 수 있습니다.

고정 너비 상자를 만들어야 한다고 상상해 보십시오.
상자는 정확히 300x300px여야 합니다. 물론 Tailwind를 확장할 수 있지만 이제 더 쉽게 확장할 수 있습니다!

다음과 같이 클래스 이름을 추가하기만 하면 됩니다.

<div class="w-[300px] h-[300px]">
  Tailwind JIT Compiler
</div>

그거 참 멋지다!npm run dev로 스크립트를 시작하고 브라우저에서 무슨 일이 일어나고 있는지 확인하십시오.



자, 정사각형 상자와 클래스가 이미 CSS 파일에 반영되어 있습니다!

이 프로젝트는 다음GitHub link에서 찾을 수 있습니다.

이 물건은 다음 단계입니다.
고마워요, 테일윈드!

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나