ReScript 프로젝트에 Tailwind를 추가하는 방법
3510 단어 tailwindcssrescript
전체 코드를 보거나 빠르게 설정하려는 경우 마지막에 몇 가지 도구와 템플릿을 포함했습니다.
이것은 Tailwind를 추가하려는 기존 ReScript 프로젝트가 있다고 가정합니다.
vite
을 사용하는 경우 필요한 종속성을 추가하여 시작합니다. postcss
필요하지 않습니다.npm install --dev tailwindcss postcss autoprefixer
이제 실행할 준비가 되었습니다.
npx tailwindcss init -p
그러면 두 개의 파일이 생성됩니다.tailwind.config.js
- 기본 Tailwind 구성postcss.config.js
- Tailwind 및 Autoprefixer가 있는 PostCSS 구성Tailwind의 모든 기능을 추가하기 위해
src
폴더 안에 다음 내용이 포함된 CSS 파일을 만듭니다./* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
그런 다음 이 CSS 파일을 ReScript 코드로 가져옵니다. 일반적으로 입력 파일에 넣습니다.
es6
출력을 사용하는 경우 다음을 추가합니다.// Index.res
%%raw("import './index.css'")
또는
commonjs
를 출력으로 사용하는 경우// Index.res
%%raw("require('./index.css')")
그거야!
webpack
, vite
또는 무엇을 사용하든 CSS를 선택하고 Tailwind의 모든 클래스를 컴파일해야 합니다.Tailwind의 JIT 컴파일러 사용
Tailwind(> v2.1)includes a just-in-time compiler . 사용하는 스타일만 생성하므로 훨씬 빠릅니다. 또한 기본적으로 포함되는 모든 변형 및 임의의 스타일 생성과 같은 몇 가지 멋진 새 기능이 포함되어 있습니다.
이 기능은 아직 미리 보기 상태이지만 큰 문제는 없었습니다. 활성화하려면 Tailwind 구성에 한 줄을 추가하기만 하면 됩니다.
// tailwind.config.js
{
mode: 'jit',
...
}
NOTE : Make sure that the
purge
setting has been added or no styles will be generated
도구 및 템플릿
ReScript와 Tailwind를 통합하는 과정을 더욱 쉽게 하기 위해 다음은 도움이 되는 몇 가지 도구와 템플릿입니다.
Supreme - Tailwind(JIT 및 다크 모드 포함) 및 Vite를 사용하여 ReScript 템플릿을 빠르게 설정할 수 있는 CLI를 작성했습니다. 내가 좋아하는 방식으로.
Next.js + Tailwind - Tailwind에서 만든 Next.js 템플릿
Reference
이 문제에 관하여(ReScript 프로젝트에 Tailwind를 추가하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/believer/how-i-add-tailwind-to-my-rescript-projects-302n텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)